What is Prop Drilling?

Prop Drilling happens when you pass props through multiple layers of components just to reach a deeply nested child. It can make the code messy and hard to maintain.

Example of Prop Drilling

const App = () => {
const user = "Kramer";

return <Parent user={user} />;
};

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

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

const GrandChild = ({ user }) => {
return <h2>Hello, {user}! </h2>;
};

export default App;

Problem: The user prop is passed through Parent and Child just to reach GrandChild.

How to Avoid Prop Drilling?

1. React Context API
2. State Management Libraries (Redux, Zustand)
3. Component Composition
4. useContext + useReducer combo for more complex state

Solution Using React Context API

import React, { createContext, useContext } from 'react';

//  Create Context
const UserContext = createContext();

const App = () => {
const user = "Kramer";

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

const Parent = () => <Child />;

const Child = () => <GrandChild />;

const GrandChild = () => {
//  Consume Context
const user = useContext(UserContext);
return <h2>Hello, {user}! </h2>;
};

export default App;

Why This is Better?

• No need to pass props manually through Parent and Child.
• GrandChild directly consumes the user data using useContext.
• Cleaner and more maintainable code!

Pro Tip:

• For simple cases, Context API works great.
• For larger apps, consider Redux or Zustand for advanced state management.