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.

Practice

1. What happens during the updating phase in a React component?

easy

A. The component is removed from the screen

B. The component is created for the first time

C. The component's styles are applied

D. The component re-renders when state or props change

Solution

1. Step 1: Understand React component lifecycle phases

   The updating phase happens after the initial render when state or props change.

2. Step 2: Identify what triggers re-rendering

   State or props changes cause React to re-render the component to update the UI.

3. Final Answer:

   The component re-renders when state or props change -> Option D

4. Quick Check:

   Updating phase = re-render on state/props change [OK]

Hint: Updating phase means re-render on state or props change [OK]

Common Mistakes:

• Confusing updating with mounting or unmounting phases
• Thinking styles apply only during updating
• Believing updating happens without state or props change

2. Which of the following is the correct way to update state in a React functional component during the updating phase?

easy

A. this.setState({ count: count + 1 })

B. setCount(count + 1)

C. updateState(count + 1)

D. changeState({ count: count + 1 })

Solution

1. Step 1: Identify state update method in functional components

   Functional components use the setter function from useState, e.g., setCount.

2. Step 2: Check syntax correctness

   setCount(count + 1) correctly updates the state by adding 1.

3. Final Answer:

   setCount(count + 1) -> Option B

4. Quick Check:

   Use setter from useState to update state [OK]

Hint: Use setter from useState to update state [OK]

Common Mistakes:

• Using this.setState in functional components
• Calling non-existent functions like updateState
• Trying to mutate state directly

3. Consider this React component snippet:

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

useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console after these updates?

medium

A. Count changed: 1Count changed: 2

B. No output

C. Count changed: 2

D. Count changed: 0Count changed: 1Count changed: 2

Solution

1. Step 1: Understand state updates batching

   Multiple state updates in the same event batch are combined; only the last update triggers effect.

2. Step 2: Analyze useEffect dependency

   useEffect runs after render when count changes, so it logs only once with the final value 2.

3. Final Answer:

   Count changed: 2 -> Option C

4. Quick Check:

   State updates batch; effect logs last value [OK]

Hint: Multiple state updates batch; effect runs once with last value [OK]

Common Mistakes:

• Assuming useEffect runs after every setCount call immediately
• Expecting console to log intermediate values
• Not knowing React batches state updates

4. What is wrong with this React code snippet during the updating phase?

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

function increment() {
  count = count + 1;
  setCount(count);
}

medium

A. Directly modifying state variable instead of using setter

B. Missing dependency array in useEffect

C. Using setCount with a number instead of an object

D. Not returning JSX from the component

Solution

1. Step 1: Identify state mutation

   The code directly changes count variable, which is not allowed in React state management.

2. Step 2: Correct way to update state

   Use setCount(count + 1) without modifying count directly.

3. Final Answer:

   Directly modifying state variable instead of using setter -> Option A

4. Quick Check:

   Never mutate state variable directly; use setter [OK]

Hint: Never assign state variable directly; always use setter [OK]

Common Mistakes:

• Trying to change state variable directly
• Confusing state variable with setter function
• Ignoring React's immutable state rule

5. You want to update a React component's state only when a prop value changes, avoiding unnecessary re-renders. Which approach correctly uses the updating phase to achieve this?

function MyComponent({ value }) {
  const [state, setState] = useState(value);

  // What should go here?
}

hard

A. useEffect(() => { setState(value); }, [value]);

B. useEffect(() => { setState(value); }, []);

C. setState(value); // directly in component body

D. useEffect(() => { setState(value); });

Solution

1. Step 1: Use useEffect to react to prop changes

   To update state only when value prop changes, use useEffect with [value] dependency.

2. Step 2: Avoid unnecessary updates

   Dependency array ensures effect runs only when value changes, preventing infinite loops or extra renders.

3. Final Answer:

   useEffect(() => { setState(value); }, [value]); -> Option A

4. Quick Check:

   useEffect with [value] updates state on prop change only [OK]

Hint: Use useEffect with dependency array for prop-based updates [OK]

Common Mistakes:

• Leaving dependency array empty causing no updates
• Calling setState directly in component body causing infinite loops
• Omitting dependency array causing effect on every render