What I Learned Today About React Rendering

Today I spent some time understanding how React handles rendering under the hood. I focused on three related concepts: the render process, diffing, and the key prop. Writing this down helped me connect the dots, so I’m sharing it here.

---

1. React’s Render Process (Quick Recap)

Whenever state or props change, React re-renders the component.

This does not mean the browser DOM is updated immediately. Instead, React:

1. Re-runs the component function

2. Creates a new Virtual DOM tree

3. Compares it with the previous tree

4. Updates only the parts of the real DOM that actually changed

The comparison step is called diffing.

---

2. How Diffing Works

React uses a reconciliation algorithm to efficiently compare the old and new Virtual DOM trees. To keep this process fast, React follows two core assumptions.

Rule 1: Different Element Types Produce Different Trees

If the element type changes, React assumes the entire subtree has changed.

For example, if a

becomes a , React does not try to compare their children. It removes the old tree and builds a new one from scratch.

This shortcut avoids expensive deep comparisons.

---

Rule 2: Elements With the Same Stable key Are the Same Across Renders

When rendering lists, React relies on the key prop to identify elements.

If an element keeps the same key between renders, React assumes it represents the same component and updates it instead of recreating it.

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

A stable key allows React to correctly detect:

Which items changed

Which stayed the same

Which were added or removed

Without proper keys, React may match elements by index, which can lead to incorrect updates and lost state.

---

3. Why the key Prop Matters

The key prop gives React a reliable way to track elements across renders.

Same key → same component instance

Different key → new component instance

That’s why React warns when keys are missing or unstable. They are essential for correct diffing and predictable behavior, especially in lists.

---

Closing Thought

Understanding these rules made React’s behavior feel much more predictable. Re-renders are not something to avoid—they’re part of how React works efficiently. Using stable keys and understanding diffing helps write components that behave correctly and scale well.