Avoiding prop drilling in React - Performance & Optimization

Performance: Avoiding prop drilling

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed by reducing unnecessary component re-renders and deep prop passing.

Passing data through many nested components

React

const CountContext = React.createContext();
function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child1 />
    </CountContext.Provider>
  );
}
function Child1() {
  return <Child2 />;
}
function Child2() {
  return <Child3 />;
}
function Child3() {
  const { count, setCount } = React.useContext(CountContext);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Using context avoids passing props through intermediate components, reducing unnecessary re-renders.

📈 Performance GainReduces re-renders to only components consuming context, improving input responsiveness (INP).

Passing data through many nested components

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child1 count={count} setCount={setCount} />;
}
function Child1({ count, setCount }) {
  return <Child2 count={count} setCount={setCount} />;
}
function Child2({ count, setCount }) {
  return <Child3 count={count} setCount={setCount} />;
}
function Child3({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Passing props through many layers causes all intermediate components to re-render even if they don't use the data directly.

📉 Performance CostTriggers multiple re-renders and increases interaction latency (INP) as each component updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling through many components	No extra DOM nodes	Multiple re-renders of intermediate components	Increased paint due to re-renders	[X] Bad
Using React Context to share data	No extra DOM nodes	Re-renders only consuming components	Reduced paint cost	[OK] Good

Rendering Pipeline

Prop drilling causes many components to re-render and recalculate styles and layout unnecessarily. Using context limits updates to only components that consume the data.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to many component re-renders

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed by reducing unnecessary component re-renders and deep prop passing.

Optimization Tips

1Avoid passing props through many nested components to reduce re-renders.

2Use React Context or state management to share data efficiently.

3Limit component re-renders to improve input responsiveness (INP).

Performance Quiz - 3 Questions

What is a main performance problem caused by prop drilling in React?

A Unnecessary re-renders of intermediate components

B Adding extra DOM nodes

C Slower CSS selector matching

D Blocking network requests

DevTools: React DevTools and Performance panel

How to check: Use React DevTools Profiler to record interactions and see which components re-render. Use Performance panel to check scripting time during interactions.

What to look for: Look for many unnecessary re-renders in intermediate components and long scripting times indicating slow input responsiveness.