Prop Drilling is the process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around.

Imagine someone living in Lagos, Nigeria placing an order on Amazon for a package. The package will have to go through many hands — it has to be flown by air to Nigeria, transported to the Lagos, moved from place to place until it gets into the hands of the buyer. At each stage, Amazon employs the services of people that do not ‘care’ about the product, they only help to ‘pass’ it to the person who cared — the buyer.

Prop drilling is similar: You pass data (props) from some FirstComponent to another SecondComponent— which doesn’t need the data to render but only passes it to another ThirdComponent, which also doesn’t need it and may pass it to another FourthComponent. This may continue until the data gets to the ComponentNeedingProps.

Consider the code snippet below:

The content prop is passed to FirstComponent in the root component, App. But FirstComponent does not need the prop to render, it only passes it to SecondComponent, which passes it to ThirdComponent, which passes it to ComponentNeedingProps. It is this component that uses the content prop to render content in <h3>{content}</h3>.

Why is Prop Drilling a Problem?

Prop drilling doesn’t have to be a problem. If we are passing data only between 2 or 3 levels, we are fine. It will be easy to trace the flow of data. But imagine, we are drilling 5 levels, or 10 levels, or 15.

How to Solve the Problem

Prop drilling is not a new problem in React (quite obviously), and there have been many solutions that let us pass data down to deeply nested Components.

One of which is Redux: You create a data store and connect any component to the store and voila, no matter where the component is positioned in the Component Tree it has access to the store.

React also has the concept of Context which lets you create something like a global data store and any Component in ‘context’ can have access to the data store.

But…

These techniques can be expensive. For example, using React Context API, when the Context value changes it triggers a re-render in all the children reading from the Context (except you work around it). The official React documentation has this to say:

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context

You can learn more here Before You Use Context.

How to Avoid Prop Drilling Using Component Composition

Component Composition is when you compose different Components, usually simple, together to create more complex functionality. If you have ever written a React app, I bet that you have been composing components. Take for example:

function Button(props){
  return <button onClick={props.handleClick}>{props.text}</button>
}

const SignInButton = props => {
  return <Button text="SignIn" onClickHandler={props.handleClick} />
}

Here, by using composition we created another version of the Button component, SignInButton. You can read more on the composition on React documentation page.

#prop-drilling #react #programming #javascript #components