🌱 Understanding Prop Drilling and How to Avoid It in React

Have you ever found yourself passing the same data through multiple components just to get it to a deeply nested child?
If yes — then you’ve experienced something called prop drilling.

In this post, let’s explore what prop drilling is, why it can be a problem, and how React’s Context API helps us solve it efficiently.

🧩 What Are Props in React?

In React, props (short for “properties”) are how we pass data from a parent component to its children.
They can be variable values, functions, or even entire components.

For example:

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

function Parent() {
  return <Child message="Hello from Parent!" />;
}

Here, the Parent component passes a prop called message to the Child.
That’s simple enough — but what happens when we have many levels of nested components?

🧭 What Is Prop Drilling?

Prop drilling happens when we need to pass props through multiple layers of components to reach a deeply nested one.

Let’s see an example:

function App() {
  const [count, setCount] = React.useState(0);
  return <LevelOne count={count} setCount={setCount} />;
}

function LevelOne({ count, setCount }) {
  return <LevelTwo count={count} setCount={setCount} />;
}

function LevelTwo({ count, setCount }) {
  return <LevelThree count={count} setCount={setCount} />;
}

function LevelThree({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Notice how we had to pass count and setCount through every level, even though only LevelThree actually uses them.
That’s prop drilling — and it can quickly become messy as your app grows.

⚙️ Why Is Prop Drilling a Problem?

It clutters intermediate components with props they don’t even use.

It makes code harder to maintain and refactor.

Adding or removing data often means changing multiple files.

If you’ve ever updated a prop name and had to touch several components — that’s a sign of prop drilling trouble.

🪜 What About State Lifting?

Before we fix prop drilling, it’s important to understand state lifting.

When two or more components need to share data, we can “lift” the state up to their common ancestor.

For example:

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB setCount={setCount} />
    </>
  );
}`

Here, Parent holds the state so both ChildA and ChildB can access it.
This is state lifting, and it’s useful — but it doesn’t always solve prop drilling.

🌐 Avoiding Prop Drilling with Context API

React provides a built-in solution: Context API.
It allows us to share data globally without manually passing props through every level.

Here’s how it works:

Create a context

Provide it to components

Consume it wherever needed

Example:

`import React, { createContext, useContext, useState } from "react";

// Step 1: Create Context
const GlobalContext = createContext();

function App() {
const [age, setAge] = useState(25);

return (
// Step 2: Provide context value



);
}

function Profile() {
return ;
}

function UserDetails() {
// Step 3: Consume context
const { age, setAge } = useContext(GlobalContext);
return (

`

  <p>Age: {age}</p>
  <button onClick={() => setAge(age + 1)}>Increase Age</button>
</div>

);
}



Now, the UserDetails component can access and modify age without any prop drilling. 🎉

🧠 A Quick Recap
Concept Description
Props Data passed from parent to child
Prop Drilling Passing props through multiple intermediate components
State Lifting Moving state up so multiple components can share it
Context API A global way to share state without manual prop passing
⚡ Final Thoughts

Prop drilling isn’t “bad” — it’s part of how React components communicate.
But when your app grows and you need to share data across multiple components, Context API (or tools like Redux, Zustand, or Recoil) can make your life much easier.

In short:

Use props for simple cases.
Use Context for shared global state.

💬 What about you?
Have you run into prop drilling before?
How did you solve it — Context, Redux, or another library?
Share your experience below! 🚀