🔍 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';

// 1️⃣ Create Context
const UserContext = createContext();

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

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

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

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

const GrandChild = () => {
// 3️⃣ 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.