✅ What is Prop Drilling in React?

Prop drilling in React happens when data is passed from a parent component down through multiple nested components, even though the intermediate components don’t actually need that data.

👉 In simple words: It’s like passing a parcel through multiple people just to deliver it to the right person at the end.

🔧 Example of Prop Drilling

Consider this simple React app:

// App.js
function App() {
  const user = { name: "Balaji", age: 25 };

  // Passing user down through Parent → Child
  return <Parent user={user} />;
}

// Parent.js
function Parent({ user }) {
  // Parent does not use `user`
  return <Child user={user} />;
}

// Child.js
function Child({ user }) {
  return <h1>Hello, {user.name} 👋</h1>;
}

⚡ What’s Happening Here?

App creates the user object
To reach Child, the data must pass through Parent
Parent does not use user at all
This unnecessary forwarding of props is called Prop Drilling

❌ Why Is Prop Drilling a Problem?

Prop drilling introduces several issues as applications grow:

Unnecessary complexity – Components receive props they don’t need
Harder maintenance – Renaming or changing props requires updates in many files
Reduced readability – Code becomes cluttered with unused props
Poor scalability – Deep component trees become difficult to manage

✅ Solution 1: Using React Context API

The Context API allows data to be shared across components without manually passing props at every level.

Step 1: Create Context

import { createContext } from "react";

export const UserContext = createContext(null);

Step 2: Provide Context at the Top Level

import { UserContext } from "./UserContext";

function App() {
  const user = { name: "Balaji", age: 25 };

  return (
    <UserContext.Provider value={user}>
      <Parent />
    </UserContext.Provider>
  );
}

Step 3: Consume Context Where Needed

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Child() {
  const user = useContext(UserContext);
  return <h1>Hello, {user.name} 👋</h1>;
}

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

✅ Now Parent no longer receives unnecessary props.

✅ Solution 2: Using State Management Libraries

For larger applications, global state management libraries eliminate prop drilling entirely.

Popular Options

Redux – Centralized and predictable global state
Zustand – Lightweight and simple API
Recoil – Atom-based state model
Jotai – Minimal and flexible approach

Example (Zustand)

import { create } from "zustand";

const useUserStore = create(() => ({
  user: { name: "Balaji", age: 25 },
}));

function Child() {
  const user = useUserStore(state => state.user);
  return <h1>Hello, {user.name} 👋</h1>;
}

📚 Prop Drilling vs Context API

Aspect	Prop Drilling	Context API
Data sharing	Passed manually through every component	Provided once, consumed anywhere
Code complexity	Increases with nesting	Cleaner and scalable
Maintainability	Hard to manage	Easy to maintain
Best use case	Small apps	Medium to large apps

🧾 Conclusion

Prop drilling is a common React problem that occurs when data flows through multiple components unnecessarily. While it may be acceptable in small applications, it quickly becomes a maintenance headache in larger ones.

Using the React Context API or state management libraries like Redux or Zustand helps eliminate prop drilling, making your code cleaner, more scalable, and easier to maintain. Choosing the right approach depends on your app’s size and complexity—but avoiding excessive prop drilling is always a good practice.