Prop Drilling — Simple Explanation

Prop drilling is when we pass data from a parent component to a deeply nested child component through multiple intermediate components, even though those intermediate components do not use the data themselves

// React Example with Prop Drilling

import React from 'react';

// Parent Component
function App() {
  const user = { name: 'John', age: 30 };

  return (
    <div>
      <h1>Prop Drilling Example</h1>
      <Parent user={user} />
    </div>
  );
}

// Intermediate Component
function Parent({ user }) {
  return (
    <div>
      <h2>Parent Component</h2>
      <Child user={user} />
    </div>
  );
}

// Child Component
function Child({ user }) {
  return (
    <div>
      <h3>Child Component</h3>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default App;

Prop drilling tightly couples components because intermediate components become dependent on props they don’t even use. In small applications it looks manageable, but in large-scale projects it becomes cumbersome and difficult to maintain. Debugging also becomes challenging because data flows through multiple layers unnecessarily. This problem is typically solved using the Context API or state management libraries.