Alaa Samy

Posted on Sep 25

🔥 30 Days of Frontend — Day 2: React Reconciliation

#webdev #react #frontend #javascript

Why doesn't React update the entire UI after every state change?

Because React uses reconciliation.

When a component renders again, React produces a new element tree.

React then determines what changed compared with the previous result and prepares the necessary updates.

Think of it as:

Previous tree + New tree
          ↓
    Reconciliation
          ↓
   Required updates

🧠 A Simple Example

Imagine we have a list of todos:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

Initially, our list looks like:

[A, B, C]

Then it changes to:

[A, B, D]

Because we're using stable keys, React can reason about the identity of each item:

A → same item
B → same item
C → removed
D → new item

The important part isn't just that the data changed.

It's that React can understand which elements represent the same identity across renders.

🔑 Why Do Keys Matter?

Consider this:

items.map((item) => (
  <Item key={Math.random()} />
))

Every render produces a different key.

That makes it difficult for React to identify the item as the same item from the previous render.

Instead, use a stable identifier:

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

Now React has a stable way to understand:

"This is the same item as before."

This becomes especially important when components contain local state.

For example, if each Item contains an input field, unstable keys can cause component instances to be recreated and lead to unexpected state behavior.

🧩 A Useful Mental Model

When debugging list rendering, don't only ask:

"Why did this component render?"

Also ask:

"Does React know this is the same component as before?"

That question can help explain many confusing behaviors involving:

List keys
Component identity
Local state
Re-renders
Elements being added or removed

⚙️ Where Does Reconciliation Happen?

Reconciliation happens during React's render phase.

React determines what work needs to be done first. The resulting changes are then applied during the commit phase.

A simplified mental model is:

State Update
     ↓
Render
     ↓
Reconciliation
     ↓
Determine required changes
     ↓
Commit
     ↓
DOM updates

It's important to remember that rendering does not mean React immediately changes the DOM.

The render phase is where React figures out what the next UI should look like.

The commit phase is where React applies the necessary changes to the DOM.

🎯 The Takeaway

Reconciliation is one of the core ideas behind how React updates the UI efficiently.

Once you understand reconciliation, concepts like keys, component identity, and rendering behavior become much easier to reason about.

DEV Community