React
React builds a UI out of components — functions (or classes) that return a description of markup. The core idea is declarative: you describe what the UI should be for a given state, not how to mutate it step by step. React itself computes the difference between "before" and "after" and applies the minimal edits to the real DOM.
Everything else follows from that model. State must not be mutated directly — you change it through a setter that schedules a re-render. Re-rendering flows top-down: a parent's render re-renders all its children. Hooks identify their state by call order, not by name — hence the Rules of Hooks. The section's classic traps are an effect with no dependency array (an infinite loop), key={Math.random()} (lost state), and prop mutation. The full map lives in the layers below.
Topic map
- Components, props, and state — what a component is made of and how read-only props differ from local state.
- Container and presentational components — separating "how it works" from "how it looks" for reuse.
- Rendering and the virtual DOM — an in-memory tree, reconciliation, and minimal real-DOM edits.
- State updates and batching — why
setStateis deferred, batching, and the functional-updater form. - Hooks —
useState/useEffect/useContext, how they work internally, and the Rules of Hooks. - Effect hooks —
useEffectversususeLayoutEffect,useMemo, anduseCallback. - Lifecycle — the class-component phases and where to fetch data.
- Controlled inputs — state as the source of truth versus reading the DOM through a
ref. - Keys —
keyas an instance identity, not decoration.
Common traps
| Mistake | Consequence |
|---|---|
useEffect with no dependency array plus a setState inside | The effect runs after every render and loops on refetches |
Mutating props or state in place (state.x = …) | React does not notice the change; the UI drifts out of sync |
key={Math.random()} or an array index for a changing list | Remount, loss of state, focus, and scroll |
Calling a hook inside an if or a loop | Later hooks shift onto wrong records, corrupting state |
value without onChange on an input | The input is frozen and read-only |
Reading this.state right after setState | You see the old value — the update is deferred by batching |
Fetching data in render or componentWillMount | A request on every render, or an ignored setState before the first render |
Interview relevance
React is asked as a check of whether you understand the update model, not whether you know the API. A candidate who explains a re-render as "state changes, the parent renders, or a consumed context changes", and a key as "an instance's identity across renders", immediately gets ahead of someone who memorized hook names.
Typical checks:
- How props differ from state and why props are read-only.
- What the virtual DOM and reconciliation are, and why lists need a
key. - Why
setStateis "asynchronous", what batching is, and when the functional form is needed. - How hooks store state and why they cannot be called conditionally.
- The difference between
useEffectanduseLayoutEffect, and the purpose ofuseMemo/useCallback. - A controlled input versus an uncontrolled one.
Common wrong answer: "the virtual DOM is faster than the real DOM". In fact it is not faster — it is an in-memory diffing layer that lets React apply a minimal set of edits to the real DOM instead of repainting the whole subtree.