Callback functions for state updates in React - Performance & Optimization

Performance: Callback functions for state updates

MEDIUM IMPACT

This affects how React batches and schedules state updates, impacting interaction responsiveness and rendering efficiency.

Updating state based on previous state in React

React

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

// Good: use callback to get latest state
function increment() {
  setCount(prevCount => prevCount + 1);
}

Callback ensures the latest state is used, preventing stale updates and reducing unnecessary renders.

📈 Performance GainReduces re-renders and improves input responsiveness (INP).

Updating state based on previous state in React

React

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

// Bad: directly using state variable in setState
function increment() {
  setCount(count + 1);
}

This can cause stale state updates when multiple updates happen quickly, leading to extra renders or incorrect state.

📉 Performance CostTriggers multiple re-renders and can cause layout thrashing if updates are frequent.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct state update (setCount(count + 1))	Multiple updates may cause repeated DOM changes	Multiple reflows if updates trigger layout changes	Higher paint cost due to extra renders	[X] Bad
Callback state update (setCount(prev => prev + 1))	Batched updates reduce DOM changes	Single reflow for batched updates	Lower paint cost with fewer renders	[OK] Good

Rendering Pipeline

React schedules state updates and batches them before triggering a re-render. Using callback functions ensures updates are based on the latest state, minimizing redundant renders and layout recalculations.

→State Update Scheduling

→Reconciliation

→Render

→Commit

⚠️ BottleneckReconciliation and Render stages due to unnecessary or stale updates causing extra work.

Core Web Vital Affected

INP

This affects how React batches and schedules state updates, impacting interaction responsiveness and rendering efficiency.

Optimization Tips

1Always use callback functions when new state depends on previous state.

2Avoid direct state updates that rely on current state variables to prevent stale values.

3Batch state updates to minimize re-renders and layout recalculations.

Performance Quiz - 3 Questions

Why is using a callback function in setState better for performance?

A It prevents any re-render from happening.

B It always uses the latest state value, preventing stale updates.

C It delays the update until the next page load.

D It increases the bundle size slightly.

DevTools: React DevTools and Chrome Performance panel

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

What to look for: Look for fewer renders and less layout thrashing when using callback state updates compared to direct state updates.