What is Props Drilling in React.js?

** 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:

• React Context API
• Redux (for global state management)

Props Drilling makes code harder to maintain. Use React Context API or State Management Tools like Redux to avoid unnecessary prop passing.