How does React decide what to re-render?

TL;DR

React builds a tree of fibers for your component output, diffs it against the previous tree, and commits the minimum DOM operations. 'Render' is the diff phase; 'commit' is when the DOM changes.

Two phases: render and commit

When state changes, React schedules work. In the render phase it calls your components and produces a new fiber tree — this phase is interruptible in concurrent mode. In the commit phase it applies DOM mutations and runs effects. Commit is synchronous.

What triggers a re-render

A setState/useReducer dispatch in this component or a parent.
A context value the component subscribes to changes.
A parent re-renders and the component is not memoized.

See what re-renders

Toggle memoization and watch which components run.

Interactive

Click a node to simulate setState on it. Highlighted nodes are the ones your rule says re-render. Nodes with a dashed border are wrapped in React.memo.