Passing props to components in React - Performance & Optimization

Performance: Passing props to components

MEDIUM IMPACT

Passing props affects rendering speed and update efficiency of React components.

Passing all props including unused ones to child components

React

function Parent() {
  const name = 'Alice';
  return <Child name={name} />;
}

function Child({name}) {
  return <div>{name}</div>;
}

Passing only needed props reduces re-render triggers and CPU usage.

📈 Performance Gainreduces re-renders and improves input responsiveness (INP)

Passing all props including unused ones to child components

React

function Parent() {
  const data = {name: 'Alice', age: 30, city: 'NYC'};
  return <Child {...data} />;
}

function Child(props) {
  return <div>{props.name}</div>;
}

Passing all props causes Child to re-render even if only some props are used or changed.

📉 Performance Costtriggers unnecessary re-renders and increases CPU work on updates

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing all props indiscriminately	Same DOM nodes reused	Multiple re-renders triggered	Paint cost depends on re-rendered nodes	[X] Bad
Passing only necessary props	Same DOM nodes reused	Minimal re-renders	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Props flow from parent to child components triggering React's render and reconciliation process. Unnecessary or large props cause more frequent and heavier renders.

→React Reconciliation

→Render

→Commit

⚠️ BottleneckReact Reconciliation stage where props changes cause re-rendering

Core Web Vital Affected

INP

Passing props affects rendering speed and update efficiency of React components.

Optimization Tips

1Pass only the props a component needs to avoid extra re-renders.

2Avoid passing new object or function props unless necessary or memoized.

3Use React.memo or useCallback to optimize prop-driven re-renders.

Performance Quiz - 3 Questions

What is a performance benefit of passing only necessary props to a React component?

A Triggers more layout shifts

B Increases bundle size

C Reduces unnecessary re-renders and improves responsiveness

D Blocks rendering longer

DevTools: React DevTools Profiler

How to check: Record interactions and look for unnecessary re-renders of components when props change.

What to look for: Components re-rendering without prop changes or with unchanged relevant props indicate inefficiency.