SamwithCode

Props Drilling in React js 2025

🔁 Props Drilling in React JS 2025

Props Drilling refers to the process of passing data from a parent component to deeply nested child components via props — even if intermediate components don't need the data.

📌 Problem:

This can make code hard to maintain and understand, especially as the component tree grows.

🧩 Example:

Let’s say we want to pass a user’s name from a parent to a deeply nested child:


// ParentComponent.jsx
import React from 'react';
import ChildA from './ChildA';

function ParentComponent() {
  const userName = 'Saif';

  return ;
}

export default ParentComponent;

// ChildA.jsx
import React from 'react';
import ChildB from './ChildB';

function ChildA({ userName }) {
  return ;
}

export default ChildA;

// ChildB.jsx
import React from 'react';
import ChildC from './ChildC';

function ChildB({ userName }) {
  return ;
}

export default ChildB;

// ChildC.jsx
import React from 'react';

function ChildC({ userName }) {
  return 
Hello, {userName}!
;
}

export default ChildC;

⚠️ Disadvantages:

  • Unnecessary prop forwarding through intermediate components
  • Hard to manage and refactor
  • Increased code complexity

✅ Better Alternatives (2025):

  • React Context API – Share data globally without drilling
  • Zustand, Redux, or Jotai – Lightweight global state management
  • useContext + useReducer combo – Scalable local state sharing