Rendering and reconciliation

"Rendering" in React means one specific thing: React calls your component function to find out what it should look like now. It does not mean the DOM was touched.

Render, then commit

An update goes through two phases:

1. Render. React calls the components that need updating. Each returns a new tree of elements. React compares that tree with the one from the previous render — this comparison is reconciliation — and works out which DOM changes are needed.
2. Commit. React applies those changes to the DOM, attaches refs, and then runs effects.

A render that produces the same output as last time leads to a commit with nothing to change. Renders are meant to be cheap and pure; the DOM work is what React keeps small.

What triggers a render

• The first mount.
• A state update in the component (setState, dispatch).
• A change in a context value the component reads.
• Its parent rendered. By default, when a component renders, every component it returns renders too — whether or not their props changed.

The last point surprises people: "props changed" is not the trigger. A child re-renders because its parent did; memo (lesson 12) is the opt-in that makes a child skip when its props are equal.

How React matches the new tree to the old

Comparing two arbitrary trees optimally is expensive, so React uses two cheap rules:

• Elements are matched by position among their siblings (or by key, next lesson).
• At a matched position, if the element type is the same, React keeps the existing component instance — and its state — and just gives it new props. If the type differs, React unmounts the old subtree, throwing away all state inside it, and mounts the new one from scratch.

The model below applies those rules to a few tree changes:

1// Walk both trees together: a node keeps its instance (and state) only2// when it has the same type at the same position and its parent was kept.3function diff(prev, next, path = "root", out = []) {4  if (!next) return out;5  const kept = prev != null && prev.type === next.type;6  out.push(`${path} ${next.type}: ${kept ? "kept" : "mounted fresh"}`);7  (next.children ?? []).forEach((child, i) =>8    diff(kept ? prev.children?.[i] : null, child, `${path}.${i}`, out),9  );10  return out;11}12 13const counter = { type: "Counter" };14export function run() {15  return {16    ternarySameSlot: diff(17      { type: "div", children: [counter] },               // isFancy ? <Counter fancy /> ...18      { type: "div", children: [{ type: "Counter" }] },   // ... : <Counter />19    ),20    wrapperChanged: diff(21      { type: "div", children: [counter] },22      { type: "section", children: [counter] },23    ),24    slotKeptByNull: diff(25      { type: "div", children: [{ type: "Banner" }, counter] },26      { type: "div", children: [null, counter] },         // {show && <Banner />}27    ),28    typeSwapped: diff(29      { type: "div", children: [counter] },30      { type: "div", children: [{ type: "Timer" }] },31    ),32  };33}

Wrapping a component in a different parent (div to section) resets it even though the component itself did not change, because its parent was replaced and the whole subtree went with it. Conversely, two branches of a ternary that both render <Counter /> in the same slot share one instance: switching branches keeps the count.

Do not define components inside components

The type React compares is the function itself. A component declared inside another component's body is a brand-new function on every render, so its type never matches the previous one:

1function Field() {2  return "input";3}4 5function Parent() {6  // Declared inside: a new function object every time Parent runs.7  function InnerField() {8    return "input";9  }10  return { outer: Field, inner: InnerField };11}12 13export function run() {14  const first = Parent();   // render 115  const second = Parent();  // render 216  return {17    outerSameType: Object.is(first.outer, second.outer),18    innerSameType: Object.is(first.inner, second.inner),19  };20}

Every render of the parent unmounts and remounts the inner component, losing its state and any focused input inside it. Declare components at the top level of the module and pass data through props.

Common mistakes

• Believing a child renders only when its props change. It renders whenever its parent renders, unless it is wrapped in memo and its props are shallowly equal.
• Declaring a component inside another component. A new function type each render means remount each render, as the second example shows; typing into an input inside it loses focus after every keystroke.
• Changing a wrapper element conditionally, such as isWide ? <section><Form /></section> : <div><Form /></div>. The wrapper's type changes, so Form loses its state.
• Causing side effects during render. Rendering can happen more often than you expect (and twice in Strict Mode); work that touches the outside world belongs in handlers or effects.

What interviewers ask

• What is reconciliation? — Comparing the new element tree with the previous one to work out the DOM changes, using cheap heuristics rather than an optimal diff: match by position or key, and treat a different type as a different subtree.
• Does a child re-render when the parent renders but the child's props did not change? — Yes, by default; memo makes it skip when props are shallowly equal.
• Why does my input lose focus on every keystroke? — Usually its component is defined inside another component (new type each render) or its key changes, so React remounts it.