Open In App

What is prop drilling and how to avoid it ?

Improve
Improve
Like Article
Like
Save
Share
Report

In React, prop drilling is often challenging for the efficiency and maintainability of applications. In this article we will understand prop drilling, its implications and discuss its efficient alternative.

Prerequisites

What are props?

In React, components can receive information from a parent component by utilizing props (short for properties). A prop is an object accessible to all React components. It serves as a means to pass data from a parent component to a child component.

<Welcome fullName = "Sourav Sharma" />

What is Prop Drilling?

Anyone who has worked in React would have faced this and if not then will face it definitely. Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level. Here is a diagram to demonstrate it better. Data needed to be sent from Parent to ChildC. In this article different ways to do that are discussed.

Steps to create React Application:

Step 1: Create a React application using the following command:

npx create-react-app useContextReact 

Step 2: After creating your project folder i.e. useContextReact, move to it using the following command:

cd useContextReact

Project Structure:

Example 1: With using Prop Drilling

Javascript




//without_useContext.js
 
import React, { useState } from "react";
 
function Parent() {
    const [fName, setfName] = useState("firstName");
    const [lName, setlName] = useState("LastName");
    return (
        <>
            <div>This is a Parent component</div>
            <br />
            <ChildA fName={fName} lName={lName} />
        </>
    );
}
 
function ChildA({ fName, lName }) {
    return (
        <>
            This is ChildA Component.
            <br />
            <ChildB fName={fName} lName={lName} />
        </>
    );
}
 
function ChildB({ fName, lName }) {
    return (
        <>
            This is ChildB Component.
            <br />
            <ChildC fName={fName} lName={lName} />
        </>
    );
}
 
function ChildC({ fName, lName }) {
    return (
        <>
            This is ChildC component.
            <br />
            <h3> Data from Parent component is as follows:</h3>
            <h4>{fName}</h4>
            <h4>{lName}</h4>
        </>
    );
}
 
export default Parent;


Javascript




//App.js
 
import "./styles.css";
import Parent from "./without_useContext";
 
export default function App() {
    return (
        <div className="App">
            <Parent />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Demonstrating the Data initialized in Parent, Needed in last component(Child C) have to passed down each level known as Prop Drilling.

Why not to use prop drilling?

  1. Code Complexity: As components grow, prop drilling increases code complexity as it is difficult to track the flow of data through various components.
  2. Reduced Maintainability: It will become very challenging to maintain the code with prop drilling. When changes are required in the data flow, you need to make changes in many components.
  3. Performance Overhead: We have to pass props through unnecessary intermediary components which can impact performance.
  4. Decreased Component Reusability: Components used in prop drilling become tightly coupled to the structure of the parent components, so it very difficult to use it on other parts of the application.
  5. Increased Development Time: Prop drilling often requires additional planning to implement. This can slow down the development process, especially when the component hierarchies is complex.

Solve prop drilling with UseContext Hooks

The problem with Prop Drilling is that whenever data from the Parent component will be needed, it would have to come from each level, Regardless of the fact that it is not needed there and simply needed in last.

A better alternative to this is using useContext hook. The useContext hook is based on Context API and works on the mechanism of Provider and Consumer. Provider needs to wrap components inside Provider Components in which data have to be consumed. Then in those components, using the useContext hook that data needs to be consumed.

Example 2:

Javascript




//with_useContext.js
 
import React, { useState, useContext } from "react";
 
let context = React.createContext(null);
function Parent() {
    const [fName, setfName] = useState("firstName");
    const [lName, setlName] = useState("LastName");
    return (
        <context.Provider value={{ fName, lName }}>
            <div>This is a Parent component</div>
            <br />
            <ChildA />
        </context.Provider>
    );
}
 
function ChildA() {
    return (
        <>
            This is ChildA Component.
            <br />
            <ChildB />
        </>
    );
}
 
function ChildB() {
    return (
        <>
            This is ChildB Component.
            <br />
            <ChildC />
        </>
    );
}
 
function ChildC() {
    const { fName, lName } = useContext(context);
    return (
        <>
            This is ChildC component.
            <br />
            <h3> Data from Parent component is as follows:</h3>
            <h4>{fName}</h4>
            <h4>{lName}</h4>
        </>
    );
}
 
export default Parent;


Javascript




//App.js
 
import "./styles.css";
import Parent from "./with_useContext";
 
export default function App() {
    return (
        <div className="App">
            <Parent />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
 

Same output but this time instead of passing data through each level, It is directly consumed in the component required using useContext Hook.



Last Updated : 07 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads