Mental Model

What React is#

React is a declarative, component-based library for building UIs. You describe what the UI should look like for a given state; React figures out how to update the DOM to match. You never touch the DOM imperatively.

The core equation every senior engineer should internalize:

UI = f(state) — the rendered UI is a pure function of state (and props).

Give React the same state and you get the same UI. Your job is to model state correctly; rendering is derived.

Declarative vs imperative 🎯#

// Imperative: you mutate the DOM yourself
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  document.querySelector("#count").textContent = ++count;
});

// Declarative: describe UI for current state, React syncs the DOM
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Component-based UI#

UIs are trees of components — self-contained, composable functions that return UI. Components own their logic and can be reused and nested arbitrarily.

One-way data flow 🟢#

Data flows down via props (parent → child). Children signal up by invoking callbacks passed as props. This unidirectional flow makes state changes predictable — you always know where data originates.

flowchart TD
  S["state / props"] -->|"UI = f(state)"| App["App"]
  App -->|props| Header["Header"]
  App -->|props| List["List"]
  List -->|props| Item1["Item"]
  List -->|props| Item2["Item"]
  Item1 -.->|"callback (event up)"| App

The Virtual DOM in one paragraph#

The Virtual DOM is a lightweight in-memory JS-object representation of your UI tree. On each render React builds a new virtual tree, diffs it against the previous one (reconciliation), computes the minimal set of real DOM mutations, and commits only those. Direct DOM manipulation is slow (layout/reflow); batching diffed changes is why declarative React stays performant.

React vs vanilla DOM ⚠️#

Reaching for document.querySelector inside components fights React's model. React owns the DOM; if you mutate it manually React may overwrite your changes on the next render. Use refs (useRef) for the rare escape hatches (focus, measurement, integrating non-React libs).

Interview Q&A#

Q1. What does "declarative" mean in React? You describe the UI you want for the current state, not the DOM steps to get there. React computes and applies the necessary DOM mutations for you.

Q2. Explain UI = f(state). The rendered output is a deterministic function of state and props — same inputs produce the same UI. This makes rendering predictable and testable.

Q3. What is the Virtual DOM and why does it exist? An in-memory object tree representing the UI. React diffs the new tree against the old to compute minimal real-DOM updates, avoiding slow, redundant direct DOM manipulation.

Q4. What is one-way data flow? Data flows down through props; children communicate up via callbacks. State has a single source of truth, making updates predictable and easier to debug.

Q5. Why avoid manual document manipulation in React? React controls the DOM and re-renders can overwrite manual edits. Use refs for legitimate imperative needs like focus or third-party library integration.