What is Prop Drilling in React?

Prop drilling in React is the process of passing data from a parent component down to its child components through props. This can become a problem when you have deeply nested components, as you may end up passing props through several levels of components, even if some of those components don’t need that data.

For example, let’s say you have a component Grandparent that needs to pass data to its grandchild component Grandchild. If the data needs to pass through the Parent and Child components in between, you would need to pass the data as props through each of those components, even if they don’t need that data themselves. This can make your code more verbose and harder to maintain.

To avoid prop drilling, you can use the React Context API or other state management libraries like Redux. These solutions allow you to store data at a higher level and access it at a lower level without the need to pass props down through every level of the component tree.

Let’s look at a use case of prop drilling:

import React from 'react';

// Grand parent component

function Grandparent() {
  const data = { name: 'John', age: 30 };

  return (
    <div>
      <h1>Grandparent</h1>
      <Parent data={data} />
    </div>
  );
}

// Parent component

function Parent(props) {
  return (
    <div>
      <h2>Parent</h2>
      <Child data={props.data} />
    </div>
  );
}
 // Child component

function Child(props) {
  return (
    <div>
      <h3>Child</h3>
      <Grandchild data={props.data} />
    </div>
  );
}
 // GrandChild component

function Grandchild(props) {
  return (
    <div>
      <h4>Grandchild</h4>
      <p>Name: {props.data.name}</p>
      <p>Age: {props.data.age}</p>
    </div>
  );
}

In this example, Grandparent needs to pass data to Grandchild, but the data needs to pass through Parent and Child components in between. This means that the data prop needs to be passed down through three levels of components, even though only Grandchild actually needs that data.

To avoid prop drilling, you could use the React Context API instead. This would allow you to store the data at a higher level and access it at a lower level without the need to pass props down through every level of the component tree.

Happy learning …