Props Drilling in React

When building React applications, we use props to pass data from one component to another.

But what happens when we need to pass data through multiple components, even when some of those components don't need that data?

This is called Props Drilling.

Let's understand it with a simple example.

1. What is Props Drilling?

Props Drilling happens when we pass data from a parent component to a deeply nested child component through multiple intermediate components.

In simple words, we pass props through components just to reach another component that actually needs the data.

2. Understanding Props Drilling with an Example

Imagine we have three components:

• App
• Profile
• User

The App component has a username, and the User component needs to display it.

But the User component is inside the Profile component.

Let's see how we pass the data.

App.jsx

function App() {
  const username = "Lokesh";

  return <Profile username={username} />;
}

export default App;

Here, App sends the username to Profile.

Profile.jsx

function Profile({ username }) {
  return <User username={username} />;
}

Profile receives the username and passes it to User.

User.jsx

function User({ username }) {
  return <h2>Welcome, {username}</h2>;
}

export default User;

User finally receives the username and displays it.

Output:

Welcome, Lokesh

3. Why is This Called Props Drilling?

Look at how the data travels:

App
 |
 | username
 ↓
Profile
 |
 | username
 ↓
User

The App component sends the username to Profile.

Profile doesn't need the username for its own purpose. It only passes it to User.

This repeated passing of props through intermediate components is called Props Drilling.

4. What Problems Does Props Drilling Cause?

Props Drilling is not always bad. For small applications, it is perfectly fine.

But when an application becomes larger, it can cause some problems:

• More code: We need to pass the same props through multiple components.
• Difficult to maintain: Changing the data flow can become complicated.
• Unnecessary props: Some components receive data they don't actually use.

5. How Can We Avoid Props Drilling?

React provides a feature called Context API.

With Context API, we can share data between components without passing props through every intermediate component.

Let's use createContext and useContext.

App.jsx

import { createContext } from "react";
import Profile from "./Profile";

// Creating context
export const UserContext = createContext();

function App() {
  const username = "Lokesh";

  return (
    <UserContext.Provider value={username}>
      <Profile />
    </UserContext.Provider>
  );
}

export default App;

Here, we create a context and provide the username to the components inside the Provider.

Profile.jsx

import User from "./User";

function Profile() {
  return <User />;
}

export default Profile;

Notice that Profile doesn't need to receive or pass the username anymore.

User.jsx

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

function User() {

  const username = useContext(UserContext);

  return <h2>Welcome, {username}</h2>;
}

export default User;

Now User can directly access the username using useContext().

We no longer need to pass the username through Profile.

6. Props Drilling vs Context API

Props Drilling	Context API
Passes data through multiple components	Shares data through a Provider
Intermediate components pass props	Intermediate components don't need to pass the value
Useful for simple data flow	Useful for data shared by many components

7. When Should We Use Context API?

Context API can be useful when multiple components need the same information.

For example:

• Dark Mode: Share the selected theme across components.
• Authentication: Share logged-in user information.
• Shopping Cart: Share cart information across different pages.
• Language Settings: Share the selected language.

However, don't use Context API for every situation. For simple parent-to-child communication, normal props are usually enough.