Props Drilling in React JS

When you pass the data from the parent component to the child component using props, if the other child components also need that data, we drill that props. So, In this article, we’ll explore what is props drilling in React JS and how to implement this method.

What are props?

React props is an abbreviation for “properties,” It is used to pass the data contained in the parent component to the child component. So, you can only transfer data using props, you cannot modify the data because props are read-only. We can use props in both class or functional components. Apart from that, data can also be passed from the class component to the functional component.

If we use the normal props method in the functional component, we often need to use the “props” keyword, like this.

import React from 'react';

// It receives 'name' prop and displays a greeting message
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

// Parent component passes the 'name' prop
const App = () => {
return <Greeting name="John" />;
};

export default App;

If you use the shorthand method, you don’t need to use the props keyword, we can directly specify the props name we get in the parameter of the function component in curly braces, ex: {name}. Here’s an example of the shorthand props method:

import React from 'react';

// It receives 'name' prop and displays a greeting message
const Greeting = ({name}) => {
return <h1>Hello, {name}!</h1>;
};

// Parent component passes the 'name' prop
const App = () => {
return <Greeting name="John" />;
};

export default App;

Similarly, we can pass the data from parent to child class components. Here’s an example to pass the simple string data from parent to child component using props.

Parent Component:

class ParentComponent extends Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent dataFromParent={"Hello from Parent!"} />
      </div>
    );
  }
}

Child component:

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.props.dataFromParent}</p> {/* Accessing data from props */}
      </div>
    );
  }
}

When you run this code, the output will be:

Parent Component
Child Component
Hello from Parent!

Note: In the class component, we have to use the “this” keyword at the beginning of using props to access the data.

What are props drilling?

It is the practice of passing down props from a parent component to its child components. Imagine you have a component tree like this:

App
  └─ Parent Component
      └─ Intermediate Component
          └─ Child Component

If your components are like this above structure, to pass data from parent to child component, first in you have to pass from parent to intermediate component only then we can pass to the child. Although intermediate components don’t need those props, we still need to pass data to them. Let’s see an example of props drilling:

Here we need to pass a state from the App component to the child component through props, so we can pass the data in the order “App > parent > Intermediate > child“.

App.js

function App() {
  const [data, setData] = useState('Hello, prop drilling!');
  return (
    <div>
      <ParentComponent data={data} setData={setData} />
    </div>
  );
}

Parent Component.js

function ParentComponent({ data, setData }) {
  return (
    <div>
      <IntermediateComponent data={data} setData={setData} />
    </div>
  );
}

IntermediateComponent.js

function IntermediateComponent({ data, setData }) {
  // No direct use of data here, but we still have to pass it down to ChildComponent.
  return (
    <div>
      <ChildComponent data={data} setData={setData} />
    </div>
  );
}

ChildComponent.js

function ChildComponent({ data, setData }) {
  // Finally, we can use the data here.

  return (
    <div>
      <p>{data}</p>
      <button onClick={() => setData('New data!')}>Change Data</button>
    </div>
  );
}

So, remember that we cannot send data directly from the app component to the child component. This is the best example for props drilling, we have to pass props even if that component doesn’t need the data.

Conclusion

To avoid prop drilling, you can use other state management solutions like React’s Context API or external libraries like Redux to centralize and manage the state more efficiently, making the data accessible to the components that need it without explicitly passing it through intermediate components.