React — rendering & architecture

Core details

Render model (say in order): trigger (state/props/context) → React schedules work → reconciliation (Fiber) → commit (DOM updates). User events and state updates in React 18+ are batched across async boundaries in many cases—don’t assume one setState equals one paint.

Stable rules:

• Hooks order is fixed per component type; no hooks in loops/conditionals.
• Keys identify siblings; wrong keys cause stateful child bugs and expensive remounts—not “just a warning.”
• useEffect is for synchronizing with the world outside React; event handlers and render are for user-visible updates derived from props/state.

Concurrent / transitions: useTransition / startTransition mark updates as interruptible so urgent input stays responsive. Suspense reserves UI for async dependencies (data, lazy, RSC on the server in meta-frameworks).

Lists & memoization: React.memo, useMemo, useCallback are for referential stability across children that optimize on reference equality—measure before sprinkling; they add mental cost.

Strict Mode (dev): intentionally double-invokes certain lifecycles/effects to surface unsafe side effects—tests and effects must be idempotent.

Understanding

React optimizes for predictable UI as a function of state, not for minimal DOM writes at any cost. That’s why the mental model is “declare UI for each state” and let the reconciler minimize commits. Interviewers probe whether you separate derived state (compute in render or memo) from sync effects that reach into non-React systems (analytics, subscriptions, imperative widgets).

Concurrency changes the story from “updates are synchronous after the handler” to “React may defer lower-priority work”—which matters for UX (typing stays smooth) but requires care with non-idempotent effects and assumptions about tracing order.

Senior understanding

Trap answers: blanket “memo everything” without profiling; blaming React for layout thrashing that is plain DOM read/write batching bugs; using useEffect to derive state from props without a directed model (prefer keys or resetting in event paths when appropriate).

Diagram

See also

• Browser, HTML/CSS & React + hydration — DOM/CSS, React placement, hydration overview
• State, SSR & hydration
• Next.js App Router
• /frontend