Foundations & Mental Model

The idea in one sentence

React renders your UI as a function of state: UI = f(state). You don’t manually update the DOM when data changes — you describe what the UI should look like for the current state, and React figures out the minimal DOM changes to get there.

Every advanced topic — hooks, reconciliation, Suspense, the compiler — is a consequence of taking that one equation seriously. Get the model right and the rest follows.

What this module covers

Lesson	What you’ll learn
Why React & the model	Declarative vs imperative, and UI = f(state)
JSX & elements	What JSX compiles to, and what an element really is
Rendering & reconciliation	The render/commit phases, the virtual tree, and keys
State snapshot & purity	State as a snapshot, immutability, and why render is pure

The lens for the whole course

Two ideas explain almost everything React does:

flowchart TB
  f["UI = f(state)
(you describe, React updates)"] --> render["Re-render on state change
(compute the new tree)"]
  pure["Render is pure
(no side effects, same input same output)"] --> render
  render --> recon["Reconciliation
(diff old vs new, patch the DOM)"]

The two ideas everything builds on

• Because UI is a function of state, a change to state triggers a re-render — React re-runs your component to compute what the UI should now be.
• Because render is pure, React is free to call it whenever, batch it, restart it, or run it twice (StrictMode) — which is exactly what makes concurrent features possible.

Hold those two and React stops surprising you.

⚛️ The mental shift

Coming from jQuery-style code you think in mutations: “when the user clicks, find the element and change it.” React asks you to think in snapshots: “for this state, the UI looks like this.” You never touch the DOM; you change state and re-describe the UI. That inversion — from how to update to what it should be — is the entire point.

What is the core equation React is built on?

DOM = f(HTML) UI = f(state) — the UI is a function of the current state state = f(DOM) render = f(effects)

In React, how do you update what the user sees?

Find the DOM node and mutate it directly Change state and let React re-render and patch the DOM Call document.write Manually diff the virtual DOM yourself

Why does React require render to be pure?

To make the code shorter So React can call it freely — batch, restart, or double-invoke it — which enables concurrent features Because JavaScript requires it To avoid using hooks

Submit

Mark as complete