What is state in React - Performance Impact

Performance: What is state

MEDIUM IMPACT

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

Updating component data on user input

React

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

function increment() {
  setCount(prev => prev + 3);
}

Single state update with functional form batches changes, causing only one re-render.

📈 Performance GainSingle re-render, reducing CPU usage and improving responsiveness.

Updating component data on user input

React

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

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

Multiple state updates in a row using stale state cause extra re-renders and unexpected results.

📉 Performance CostTriggers 2 re-renders instead of 1, increasing CPU work and slowing interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple separate state updates	Multiple DOM updates	Multiple reflows	Higher paint cost	[X] Bad
Single batched state update	Minimal DOM updates	Single reflow	Lower paint cost	[OK] Good

Rendering Pipeline

When state changes, React schedules a re-render of the component. This triggers the virtual DOM diffing, then updates the real DOM only where needed.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

→Paint

→Composite

⚠️ BottleneckDOM Updates stage is most expensive if many nodes change due to state updates.

Core Web Vital Affected

INP

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

Optimization Tips

1Batch multiple state updates into one functional update to reduce re-renders.

2Keep state minimal and focused to avoid unnecessary DOM changes.

3Use React DevTools Profiler to monitor re-render frequency and optimize.

Performance Quiz - 3 Questions

What happens if you call multiple setState calls with stale state values in React?

A Only the last call updates the state without re-render.

B React batches them automatically with no extra cost.

C Each call causes a separate re-render, increasing CPU work.

D State updates are ignored if values are stale.

DevTools: React DevTools and Chrome Performance

How to check: Use React DevTools Profiler to record interactions and see how many times components re-render. Use Chrome Performance panel to check CPU usage and frame rate during updates.

What to look for: Look for fewer re-renders and lower CPU spikes during user input to confirm efficient state usage.