What happens when a component updates?

ReactJunior~3 min read

What "updating" a component means

An update is the lifecycle stage where React re-invokes the component to update its virtual representation (Virtual DOM) and synchronize the changes with the real DOM.

What triggers an update

A component re-renders when:

Reason	Example
State (`state`) changed	`setCount(count + 1)`
New props (`props`) arrived	The parent passed new data
The parent component itself re-rendered	Even if the props didn't change
Context (`useContext`) updated	The provider's value changed

Update stages step by step

1. Data changes

React gets a signal that the data has changed:

javascript

setCount(count + 1);

This doesn't trigger an update immediately. React puts the update in a queue (batch) and decides when to re-render the component (especially in React 18 with concurrent rendering).

2. The component function is called again

React calls the component again (like an ordinary function) to compute what JSX it should now render.

javascript

function Counter() {
  console.log("Render");
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Counter: {count}</button>;
}

Each call to the component = a new "render".

3. Comparing the Virtual DOM (diffing)

React compares the new virtual tree (the result of the new JSX) with the previous tree.

If elements differ -> React changes only the parts of the DOM that changed.
If they're the same -> the DOM is left untouched.

This makes updates fast and targeted, without a full page repaint.

4. Updating the real DOM

React applies only the necessary changes to the browser DOM.

For example: if only the text in a button changed, React will replace only the text, not recreate the whole button.

5. Running effects (`useEffect`, `useLayoutEffect`)

Once the DOM is updated, React runs the effects whose dependencies changed.

javascript

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

If count changed, the effect will run again. Before that, React will call the cleanup function of the previous effect.

Example: the full update cycle

javascript

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

  useEffect(() => {
    console.log("Mount");
    return () => console.log("Unmount");
  }, []);

  useEffect(() => {
    console.log("Update: count =", count);
    return () => console.log("Cleanup before the next effect");
  }, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Counter: {count}
    </button>
  );
}

What happens:

javascript

Mount
Update: count = 0   ← first effect run
(button clicked)
Cleanup before the next effect
Update: count = 1
(button clicked)
Cleanup before the next effect
Update: count = 2

Difference between mounting and updating

Behavior	Mounting	Updating
Is the component called	Yes, for the first time	Yes, again
Is the DOM created	Fully	Only the changes
`useEffect(() => {...}, [])`	Fires	Doesn't fire
`useEffect(() => {...}, [deps])`	Fires after mounting	On dependency change
`cleanup` in `useEffect`	None	Before the next effect call

What's usually done during an update

Task	Example
React to data changes	`useEffect(() => {...}, [value])`
Synchronize the DOM with the new state	Applying animations, scrolling
Update subscriptions	Unsubscribe first, then subscribe again
Recompute derived values	`useMemo`
Optimize re-renders	`React.memo`, `useCallback`

Class component equivalents

Stage	Class method	Functional equivalent
After update	`componentDidUpdate(prevProps, prevState)`	`useEffect(() => {...}, [deps])`
Before update (rarely used)	`shouldComponentUpdate()`	`React.memo` / `useMemo` / `useCallback`

Important to remember

Feature	Explanation
The component function is called again on every update	But state (`useState`) persists between renders
React itself optimizes DOM updates	It changes only what's needed
You can't change the DOM directly in the function body	Only in effects (`useEffect`, `useLayoutEffect`)
`useEffect` runs after the DOM update (asynchronously)	The UI updates first, then the effect runs
`useLayoutEffect` runs before the screen paints	For synchronizing element sizes or positions

Summary

Stage	What React does	What the developer does
1. Data change	Receives new `state` or `props`	Calls `setState` / `setCount`
2. Render	Calls the component again	Returns new JSX
3. Diff	Compares the old and new Virtual DOM	Does nothing - React handles it
4. Commit	Updates the real DOM	Can react in `useEffect`
5. Effects	Runs hooks whose dependencies changed	Performs side effects

Main idea:

During an update, React calls the component again, recreates the Virtual DOM, compares it with the previous one, updates only the necessary parts of the DOM, and runs the effects whose dependencies changed.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.