State re-render behavior in React - Performance & Optimization

Performance: State re-render behavior

HIGH IMPACT

This affects how often React updates the UI, impacting interaction responsiveness and rendering speed.

Updating state frequently inside a component

React

function Counter() {
  const [count, setCount] = React.useState(0);
  function increment() {
    setCount(prev => prev + 2);
  }
  return <button onClick={increment}>{count}</button>;
}

Single functional state update chains correctly (+2), avoiding stale closure issues.

📈 Performance GainCorrect state (+2), single state update and one re-render.

Updating state frequently inside a component

React

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

Multiple state updates capture the stale count from closure, resulting in incorrect state (+1 instead of intended +2).

📉 Performance CostIncorrect final count (+1 not +2), multiple queued updates batched into one re-render.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple state updates per event	Multiple state queues, 1 virtual DOM diff	Single reflow	Normal paint cost	[X] Bad
Single functional state update	One virtual DOM diff	Single reflow	Lower paint cost	[OK] Good
State updates with same value	Equality check performed	No reflows	No paint	[X] Bad
Avoid state update if value unchanged	No virtual DOM diff	No reflow	No paint	[OK] Good
Parent state update without memo	All children re-render	Multiple reflows	High paint cost	[X] Bad
Memoized child components	Selective re-render	Minimal reflows	Reduced paint	[OK] Good

Rendering Pipeline

When state updates, React schedules a re-render of the component. React then recalculates the virtual DOM, diffs it with the previous version, and updates the real DOM accordingly. This process affects style calculation, layout, paint, and composite stages depending on changes.

→Virtual DOM Diffing

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when many DOM nodes update due to state changes.

Core Web Vital Affected

INP

This affects how often React updates the UI, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Batch multiple state updates to trigger a single re-render.

2Avoid calling setState with the same value to minimize overhead.

3Use React.memo to prevent child components from re-rendering when not needed.

Performance Quiz - 3 Questions

What happens when you call setState multiple times synchronously in React?

A React triggers multiple re-renders, one per setState call

B React batches updates and triggers a single re-render

C React ignores all but the last setState call

D React throws an error

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record interactions and see which components re-render. Use Chrome Performance panel to record and analyze layout and paint times during state updates.

What to look for: Look for unnecessary component re-renders in React DevTools and long layout or paint durations in Performance panel indicating expensive updates.