Day-40 Understanding Props Drilling in React (With Examples)

When you're learning React, one concept you’ll often come across is props drilling. At first, it might seem confusing—but once you understand what’s happening, it’s quite straightforward.

Let’s break it down.

What is Props Drilling?

Props Drilling is when you pass data from a parent component down to deeply nested child components using props—even if the intermediate components don’t actually need that data.

This often leads to bloated and harder-to-maintain code, especially in large apps.

A Simple Example

Imagine you have this component structure:

App → Parent → Child → GrandChild

Now, let's say App has some data that GrandChild needs. Here’s what props drilling would look like:

function App() {
  const user = "Tamilselvan";
  return <Parent user={user} />;
}

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

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

function GrandChild({ user }) {
  return <p>Hello, {user}!</p>;
}

Notice how Parent and Child don’t use the user prop, but they still have to pass it along just so GrandChild can use it. That’s props drilling.

Why Can Props Drilling Be a Problem?

1. Hard to maintain – Changing the data structure means updating multiple components.
2. Cluttered code – Components get unnecessary props.
3. Performance issues – Every component in the chain re-renders when the prop changes.

How to Avoid Props Drilling

1. React Context API Share data across components without manually passing props.

   const UserContext = React.createContext();

   function App() {
     return (
       <UserContext.Provider value="Tamilselvan">
         <Parent />
       </UserContext.Provider>
     );
   }

   function GrandChild() {
     const user = useContext(UserContext);
     return <p>Hello, {user}!</p>;
   }

1. State management tools Like Redux, Zustand, or Recoil for large-scale apps.

Final Thoughts

Props drilling isn’t always bad—it’s just a sign that your app might need a better way to manage shared state. For small apps, it’s totally fine. But as your component tree grows, learning tools like Context API becomes essential.