beginner · 22 minute study

UI is a description produced from a state snapshot

Understanding rendering makes state updates predictable before you memorize hooks.

Loading progressEvidence grows with practice

Useful preparation · 1 prerequisite

Use this as a map, not a lock. If these ideas are familiar, continue.

Functions — An existing guided foundation in Learn → Try → Test → Build.

First, build a mental model

A component reads one render's props and state and returns a UI description. Updating state requests another render; it does not rewrite variables inside the already-running handler.

JSX describes elements; it is not a command to mutate the DOM immediately.
Each render receives its own state snapshot and event-handler closures.
React queues updates, renders the next description and commits required DOM changes.
Rendering must stay pure because React may call a component more than once before committing.

Read the codejsx · educational example

function Counter() {
  const [count, setCount] = useState(0);
  function addThree() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }
  return <button onClick={addThree}>{count}</button>;
}

Snapshot
The handler closes over count=0 for this render.
Queue
All three replacements request the value 1.
Commit
The next UI displays 1, not 3.

Production thinking

Take this beyond the example.

Keep render pure. Trace trigger→render→commit before adding effects or memoization. An extra render is not automatically a bug; a side effect in render often is.

Sources and further reading

Your evidence

unseen is a local learning signal, not a credential or proof of production competence.

Explain the mental model, then explicitly acknowledge it. Opening a page is not evidence.

Supported retries can complete this lesson. Independent evidence and delayed review determine the skill stage.

Next lesson · Compose small contracts into useful interfaces →