What is props drilling in React?

Props Drilling is a situation in React where data (props) needs to be passed through multiple levels of components, even though some intermediate components do not need the data—they only pass it down to the next component.

---

How Props Drilling Works:

When a parent component wants to pass data to a deeply nested child component, and there are several intermediate components in between, you have to pass the props through every level.
This is called props drilling.

---

Example of Props Drilling:

javascriptCopyEditfunction App() {
  const message = 'Hello from App!';
  return <Parent message={message} />;
}

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

function Child({ message }) {
  return <GrandChild message={message} />;
}

function GrandChild({ message }) {
  return <p>{message}</p>;
}

Explanation:

• App wants to pass message to GrandChild.
• It passes the message prop to Parent → Child → GrandChild.
• Parent and Child do not need the message, but they still have to pass it down.

---

Why Props Drilling is a Problem:

🔴 Unnecessary Passing: Intermediate components don’t need the data, but still need to pass it.
🔴 Hard to Maintain: As the app grows, passing props through many layers becomes messy and harder to manage.
🔴 Reduces Flexibility: If you add or remove props, every component in the chain needs updating.

---

Solutions to Avoid Props Drilling:

✅ 1. Context API (Recommended for Global State)

Use React Context API to share state globally without passing props manually through each level.

javascriptCopyEditimport { createContext, useContext } from 'react';

// Create Context
const MessageContext = createContext();

function App() {
  const message = 'Hello from Context!';
  return (
    <MessageContext.Provider value={message}>
      <Parent />
    </MessageContext.Provider>
  );
}

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

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

function GrandChild() {
  const message = useContext(MessageContext);
  return <p>{message}</p>;
}

✅ 2. State Management Libraries (Redux, Zustand, etc.)

For larger applications, use state management libraries like:

• Redux (centralized state)
• Zustand (simpler, flexible state)
• Recoil, MobX, Jotai, etc.

These help manage and share state across deeply nested components.

---

Key Takeaways:

Feature	Description
Props Drilling	Passing props through multiple nested components, even if some don’t need them.
Problem	Hard to maintain and clutters component hierarchy.
Solution	Context API for global state or state management libraries like Redux/Zustand.
Best Practice	Use props for local state, but avoid drilling; prefer Context for deeply shared state.

---

Props drilling is common in beginner React development, but using Context API or state management libraries is the preferred approach as your application scales.