How react render works?

Render vs Reconciliation vs Commit

React updates happen in three phases:

---

1. Render Phase

React calls your component functions to produce a new virtual UI tree.

• Pure calculation

• Not visible to the user

• Can be paused, restarted, thrown away (thanks to Fiber)

---

2. Reconciliation Phase

React compares:

• old virtual DOM tree

• new virtual DOM tree

using the diffing algorithm.

React figures out:

• which nodes changed

• which nodes can be reused

• which nodes need to be deleted/added

---

3. Commit Phase

React applies the necessary changes to the real DOM:

• update text

• add nodes

• remove nodes

• apply styles

• attach event listeners

  This is the only phase visible to the user.

How change detection happens in Reconciliation Phase?

Step 1 — Check if the value actually changed using Objec.is(old, new):

Examples:

✔ Primitives → change detected by value
✔ Objects → change detected by reference

const [user, setUser] = useState({id:1,name:'Bikash'});
user.name = 'Jack';
setUser(user) // ❌ same reference → no render

const newUser = {…user} // spread operator creates a new copy of object user in js/ts
setUser(newUser) // ✔ new reference → render

//If you want to update name property then you could do below:
const newUser = {…user, name:'Jack'};
setUser(newUser) // ✔ new reference → render