What is Props Drilling in React.js?

#javascript #frontend #coding #webdev

** What is Props Drilling?**
Props Drilling happens when you pass props from a parent component to deeply nested child components, even if some intermediate components don’t need those props. This makes the code hard to manage and maintain.

Example of Props Drilling
Let’s create a simple React App that demonstrates Props Drilling by passing a message prop from App.js down to a deeply nested component:

1.Create React App

npx create-react-app props-drilling-example
cd props-drilling-example
npm start

2.Update App.js

import React from "react";
import Parent from "./Parent";

function App() {
  return (
    <div>
      <h1>Props Drilling Example 🚀</h1>
      <Parent message="Hello from App.js!" />
    </div>
  );
}

export default App;

3.Create Parent.js

import React from "react";
import Child from "./Child";

function Parent({ message }) {
  return <Child message={message} />;
}

export default Parent;

4.Create Child.js

import React from "react";
import GrandChild from "./GrandChild";

function Child({ message }) {
  return <GrandChild message={message} />;
}

export default Child;

5.Create GrandChild.js

import React from "react";

function GrandChild({ message }) {
  return <h2>{message}</h2>;
}

export default GrandChild;

Output:

Flow Diagram Should Look Like This:

What’s the Problem?

We are passing message prop through multiple components (Parent → Child → GrandChild) even though only GrandChildneeds it.
This is Props Drilling, and in large apps, it becomes difficult to manage.

How to Fix Props Drilling?
Instead of passing props manually through multiple components, use: