Props Drilling is the process of passing data from a parent component to a deeply nested child component through multiple intermediate components using props.
Passing props through multiple components to reach the component that actually needs the data is called Props Drilling.

Example of Props Drilling:

Imagine we have 3 components:

  • App (Parent)
  • Profile (Child)
  • User (Grandchild)

Code Example:

App.jsx (Parent)

function App() {
const name = "Sathish";

return <Profile name={name} />;

}

export default App;

Profile.jsx (Child)

function Profile({ name }) {
return ;
}

export default Profile;

User.jsx (Grandchild)

function User({ name }) {
return

Hello {name}

;
}

export default User;

Output:

Hello Sathish

How does it work?

  1. App component creates the name variable.
  2. App passes name to Profile using props.
  3. Profile receives name.
  4. Profile passes name to User.
  5. User displays the name.

Disadvantages of Props Drilling:

  • Passing props through unnecessary components.
  • Makes code difficult to maintain.
  • Increases complexity when many components are involved.

How to Avoid Props Drilling?

  1. Context API – Share data between components without passing props through every level.
  2. Redux – Manage application-wide state.
  3. Zustand – Another state management library.

Props drilling is not always bad. For a small application, normal props are perfectly fine.