How does React determine which components need to be updated?

ReactJunior~3 min read

Key idea

React does not update the whole UI, only the components whose props, state, or context changed.

To figure this out, React uses its own reconciliation algorithm.

1. What triggers an update

A re-render (and therefore a potential component update) can be triggered by:

A change in internal state (useState, setState)
A change in props passed from the parent
A change in context (useContext)
An explicit call to forceUpdate() (in class components)

These events trigger the render phase: React calls the component function again (or render() in a class).

2. React builds a new Virtual DOM tree

React calls all the affected components and creates a new "virtual representation" of the UI, that is, a new Virtual DOM tree.

Every JSX element turns into an object like:

javascript

{
  type: 'div',
  key: null,
  props: { className: 'btn', children: 'Click me' }
}

3. React compares the old and new tree

Now reconciliation begins:

React takes the old Virtual DOM tree (before the update).
It compares it with the new tree created after render() is called.
It calculates which nodes changed: this is the diffing process.

4. The rules React uses to decide what to update

Rule 1: comparison by element type

If the element's type is the same, React keeps the old DOM node and updates only the props.

javascript

<div className="old" />
<div className="new" />  // same element

React will simply update className without recreating the element.

If the type changed, React removes the old node and creates a new one.

javascript

<div>...</div>
<span>...</span>

The old <div> will be removed, and <span> will be created from scratch.

Rule 2: comparison by key in lists

When you have a list of components:

javascript

{items.map(item => <Todo key={item.id} text={item.text} />)}

React uses key to figure out which elements stayed the same and which are new / removed / moved.

If key matches, the element stays.
If key is different, React treats it as a new element.

This lets React avoid recreating the whole list, only the changed elements.

Rule 3: comparison of props and state

If the component is of the same type, but:

props changed (by value or reference),
or internal state was updated,

React will re-render this component to recalculate the Virtual DOM.

If the props haven't changed (and the component doesn't depend on context), React may skip re-rendering it (especially when using React.memo).

Rule 4: using shouldComponentUpdate / React.memo

For optimization, React can ask the component:

"Do you need to re-render?"

In class components: via shouldComponentUpdate(nextProps, nextState).
In functional components: via React.memo(Component, areEqual).

If the answer is "No, everything's the same," React skips the update and doesn't call render().

5. React computes the diff and updates only the changed parts of the DOM

After comparing, React knows:

which components need to update;
which DOM nodes need to be redrawn;
which ones to leave as they are.

Next comes the commit phase, where React:

applies these minimal changes to the real DOM;
calls useLayoutEffect and useEffect.

Illustration of the process

javascript

State changed
   ↓
Component recreated the Virtual DOM
   ↓
React compared the old and new tree (reconciliation)
   ↓
Found the changed nodes
   ↓
Applied only the necessary changes to the DOM (commit phase)

Example

javascript

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Header />
      <Counter value={count} />
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

count changed, so React calls App() again.
A new Virtual DOM is created.
React compares:
- <Header /> - same props, doesn't update.
- <Counter value={count} /> - props changed, updates.
Only the text inside <Counter> updates; everything else stays untouched.

Summary

React determines which components need to be updated using the reconciliation algorithm: by comparing the new and old Virtual DOM tree and analyzing type, key, props, and state.

What changed	Will React update it?	Why
state inside the component	Yes	the component is recreated
props from the parent	Yes	new prop values
Parent, but not the child's props	Depends	unless React.memo
context	Yes	new context value
an element's key	Yes	a new element is created
Nothing changed	No	no diff found

Short Answer

Interview ready

Premium

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