Parent-child data flow in React - Performance & Optimization

Performance: Parent-child data flow

MEDIUM IMPACT

This concept affects how efficiently data updates propagate through components, impacting interaction responsiveness and rendering speed.

Passing data from a parent component to a child component

React

function Parent() {
  const [count, setCount] = React.useState(0);
  const data = React.useMemo(() => ({ count }), [count]);
  return <Child data={data} />;
}

function Child({ data }) {
  console.log('Child rendered');
  return <div>{data.count}</div>;
}

Memoizing the data object prevents Child from re-rendering unless count changes.

📈 Performance Gainreduces Child re-renders to only when count changes, saving layout and paint cycles

Passing data from a parent component to a child component

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child data={{ count, timestamp: Date.now() }} />;
}

function Child({ data }) {
  console.log('Child rendered');
  return <div>{data.count}</div>;
}

Passing a new object literal as prop on every render causes Child to re-render even if count did not change.

📉 Performance Costtriggers 1 re-render of Child per Parent render, causing unnecessary layout and paint

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing new object literals as props	Child re-renders every parent update	Triggers reflow per child render	Paints child content each time	[X] Bad
Memoizing props with useMemo	Child re-renders only on data change	Single reflow per actual update	Paints only changed content	[OK] Good

Rendering Pipeline

When parent state changes, React re-runs the parent component function, creating new props for children. If props are new references, children re-render, triggering layout and paint.

→JavaScript Execution

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation and Layout stages due to unnecessary child re-renders

Core Web Vital Affected

INP

This concept affects how efficiently data updates propagate through components, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid passing new object or array literals as props directly in JSX.

2Use React.memo and useMemo to memoize components and props.

3Check child component renders with React DevTools Profiler to spot unnecessary updates.

Performance Quiz - 3 Questions

What causes a child React component to re-render unnecessarily when receiving props from its parent?

A Using React.memo on the child component

B Passing primitive values like numbers or strings as props

C Passing a new object or array literal as a prop each render

D Not updating the parent state

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with the parent component. Look for how often the child component re-renders.

What to look for: Frequent child renders without prop changes indicate unnecessary re-renders hurting performance.