What is prop drilling and how to avoid it

Prop Drilling is a situation when data (props) is passed through multiple levels of nested components, even if intermediate components don't use them directly.

Example:

tsx

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

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

function Child({ user }) {
  return <p>Hello, {user.name}!</p>;
}

Here Child uses user, but it's passed through Parent which doesn't use it itself — this is Prop Drilling.

Why Can This Be Problem?

Component pollution — intermediate components receive unnecessary props
Maintenance complexity — when changing data need to fix many components
Reduced reusability — components tied to props they don't need
Bug probability — when changing structure hard to track where props are used

How to Avoid Prop Drilling?

React Context API

Context allows passing data to any nesting level, bypassing intermediate components.

tsx

const UserContext = createContext(null);

function App() {
  const user = { name: "John" };

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

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

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

Global State (Zustand, Redux, Jotai, Recoil)

Suitable for more complex applications with lots of data needed in different parts.

tsx

// Zustand example
const useUserStore = create((set) => ({
  user: { name: "John" },
}));

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

Composition (render props, slots, hooks)

Sometimes props can be passed not directly but using functions or custom hooks that encapsulate logic.

When Prop Drilling is acceptable:

If passing 1-2 levels deep — it's normal. Use context or global state only if really needed.

Conclusion

Prop Drilling — excessive prop passing through component chain
Problem appears at deep nesting
Can avoid with Context API, global state or composition

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

What is prop drilling and how to avoid it

#Why Can This Be Problem?

#How to Avoid Prop Drilling?

#React Context API

#Global State (Zustand, Redux, Jotai, Recoil)

#Composition (render props, slots, hooks)

#Conclusion