State vs props comparison in React - Performance Comparison

Performance: State vs props comparison

MEDIUM IMPACT

This concept affects how React components update and re-render, impacting interaction responsiveness and rendering speed.

Passing data to child components and managing updates

React

function Parent() {
  const data = { value: 42 };
  return <Child data={data} />;
}

function Child({ data }) {
  // use props directly without copying to state
  return <div>{data.value}</div>;
}

Using props directly avoids extra state and re-renders, improving rendering speed and reducing memory use.

📈 Performance GainSingle render per update; avoids unnecessary re-renders and memory overhead.

Passing data to child components and managing updates

React

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

function Child({ data }) {
  const [localData, setLocalData] = React.useState(data);
  // copies props to state unnecessarily
  return <div>{localData.value}</div>;
}

Copying props into state causes extra memory use and can lead to stale data or unnecessary re-renders.

📉 Performance CostTriggers extra re-renders and memory usage; can cause multiple renders per update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Copy props to state unnecessarily	Extra virtual DOM nodes created	Multiple reflows per update	Higher paint cost due to repeated updates	[X] Bad
Use props directly without copying	Minimal DOM operations	Single reflow per update	Lower paint cost	[OK] Good
Frequent state updates without memoization	Many DOM updates	Many reflows	High paint cost	[!] Bad
State updates with useCallback and memo	Optimized DOM updates	Reduced reflows	Lower paint cost	[OK] Good

Rendering Pipeline

Props and state changes trigger React's reconciliation process, leading to virtual DOM diffing, then real DOM updates causing layout and paint.

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation and Layout stages are most expensive when state changes cause many re-renders.

Core Web Vital Affected

INP

This concept affects how React components update and re-render, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid copying props into state unless you need to modify the data locally.

2Use props for static or read-only data to reduce re-renders.

3Memoize callbacks and components to prevent unnecessary updates.

Performance Quiz - 3 Questions

Why is copying props into state usually a bad idea for performance?

A It causes extra re-renders and memory use

B It reduces the number of renders

C It makes components load faster

D It improves browser caching

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record interactions and see component re-renders; use Chrome Performance to check layout and paint times.

What to look for: Look for unnecessary re-renders in React DevTools and long layout or paint durations in Performance panel indicating inefficient state/props usage.