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:

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.

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.

// 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.

Conclusion

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