Updating phase in React - Performance & Optimization

Performance: Updating phase

HIGH IMPACT

This affects how quickly React updates the UI after state or props change, impacting interaction responsiveness and visual stability.

Updating component state frequently on user input

React

function Search() {
  const [query, setQuery] = React.useState('');
  const [debouncedQuery, setDebouncedQuery] = React.useState('');
  React.useEffect(() => {
    const handler = setTimeout(() => setDebouncedQuery(query), 300);
    return () => clearTimeout(handler);
  }, [query]);
  function handleChange(e) {
    setQuery(e.target.value);
  }
  return <input value={query} onChange={handleChange} />;
}

Debouncing delays updates to the main state, reducing the number of re-renders and improving input responsiveness.

📈 Performance GainReduces re-renders from every keystroke to one per 300ms pause, lowering CPU usage and improving INP.

Updating component state frequently on user input

React

function Search() {
  const [query, setQuery] = React.useState('');
  function handleChange(e) {
    setQuery(e.target.value);
  }
  return <input value={query} onChange={handleChange} />;
}

Updating state on every keystroke causes React to re-render the component and its children each time, leading to many renders and slow input response.

📉 Performance CostTriggers 1 re-render per keystroke, causing high CPU usage and input lag on slow devices.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Frequent state updates on every input	Many small DOM updates	Many reflows per keystroke	High paint cost due to frequent changes	[X] Bad
Debounced state updates	Fewer DOM updates	Single reflow per debounce interval	Lower paint cost	[OK] Good
No memoization on large lists	All child nodes updated	Many reflows	High paint cost	[X] Bad
Memoized child components	Minimal DOM updates	Few reflows	Low paint cost	[OK] Good

Rendering Pipeline

During the updating phase, React reconciles changes, calculates the new virtual DOM, and applies minimal DOM updates. This affects style calculation, layout, paint, and composite stages in the browser.

→Reconciliation

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive due to DOM updates triggered by React's reconciliation.

Core Web Vital Affected

INP

This affects how quickly React updates the UI after state or props change, impacting interaction responsiveness and visual stability.

Optimization Tips

1Avoid updating state on every small input change; use debouncing or throttling.

2Use React.memo to prevent unnecessary re-renders of child components.

3Batch multiple state updates to reduce layout and paint costs.

Performance Quiz - 3 Questions

What is the main performance issue when updating React state on every keystroke without optimization?

A Triggers many re-renders causing slow input response

B Blocks network requests

C Increases bundle size significantly

D Causes layout shifts unrelated to input

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long scripting tasks and frequent layout shifts during updates.

What to look for: High scripting time and many layout events indicate expensive updates; fewer and shorter tasks indicate optimized updating phase.