useState hook introduction in React - Performance & Optimization

Performance: useState hook introduction

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed when updating component state.

Updating component state on user input

React

const [count, setCount] = useState(0);

function handleClick() {
  setCount(prev => prev + 2);
}

Single state update with functional form batches changes into one render.

📈 Performance GainTriggers 1 render, reducing rendering time by half.

Updating component state on user input

React

const [count, setCount] = useState(0);

function handleClick() {
  setTimeout(() => {
    setCount(count + 1);
  }, 0);
  setTimeout(() => {
    setCount(count + 2);
  }, 0);
}

Multiple state updates scheduled asynchronously cause multiple renders, slowing interaction.

📉 Performance CostTriggers 2 renders instead of 1, doubling rendering work.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple setState calls separately	Multiple updates	Multiple reflows	Multiple paints	[X] Bad
Single functional setState call	Single update	Single reflow	Single paint	[OK] Good

Rendering Pipeline

When useState updates, React schedules a re-render of the component. The browser recalculates styles, layout, and paints the updated UI.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when many components re-render.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed when updating component state.

Optimization Tips

1Batch state updates using functional setState to reduce renders.

2Avoid updating state unnecessarily to keep UI responsive.

3Use React DevTools Profiler to identify excessive renders.

Performance Quiz - 3 Questions

What happens if you call setState multiple times in a row with non-functional updates?

A Each call triggers a separate render, slowing UI responsiveness.

B React batches them automatically into one render always.

C No renders happen until the component unmounts.

D The state updates are ignored except the last one.

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record interactions and see how many renders occur per state update. Use Chrome Performance to check layout and paint times.

What to look for: Look for multiple renders triggered by one user action and long layout or paint durations indicating inefficient updates.