React · Interview handbook

Understand React well enough to explain it.

A focused roadmap for the rendering, state, Hooks, architecture, performance, and production concepts that matter most in frontend interviews.

48planned chapters
6connected parts
0practice scenarios
Interview learning loop

Build a model, explain it, then apply it.

  1. 01Mental model
  2. 02Runtime behavior
  3. 03Code example
  4. 04Tradeoff
  5. 05Interview answer
  6. 06Practice
Six-part curriculum

React knowledge without tutorial filler

Handbook chapters develop transferable mental models. Implementation scenarios stay in React Practice, where they can include requirements, hints, and complete solutions.

Your progress0 of 48 chapters · 0%
0%
Part I

Rendering model

Build the mental model behind rendering, identity, state, and updates.

7 chapters
  1. 01

    Render and commit phases

    How React calculates changes and applies them to the host environment.

    Available
  2. 02

    What causes a component to render

    Initial renders, state updates, parent renders, context, and external stores.

    Available
  3. 03

    Reconciliation and element identity

    How type, position, and identity influence reuse of component trees.

    Available
  4. 04

    Keys and list rendering

    Stable identity, reordering, state preservation, and common key mistakes.

    Available
  5. 05

    State as a snapshot

    Why each render sees a fixed state value and event handlers capture it.

    Available
  6. 06

    State preservation and reset

    How tree position preserves state and how to reset it intentionally.

    Available
  7. 07

    Batching and functional updates

    Queued updates, automatic batching, updater functions, and update order.

    Available
Part II

State and Hooks

Model application state and synchronize React with systems outside React.

9 chapters
  1. 08

    Choosing a state structure

    Grouping related values, avoiding contradictions, and normalizing state.

    Available
  2. 09

    Derived and redundant state

    Calculate during rendering instead of synchronizing duplicate values.

    Available
  3. 10

    Rules of Hooks

    Call-order identity, top-level calls, and why the rules exist.

    Available
  4. 11

    Closures and state updates

    Captured values, stale closures, event handlers, and safe updates.

    Available
  5. 12

    useEffect as synchronization

    Effects as a bridge to external systems rather than lifecycle callbacks.

    Available
  6. 13

    Effect dependencies and cleanup

    Reactive dependencies, teardown, race conditions, and idempotence.

    Available
  7. 14

    useRef and mutable values

    Persisting non-rendering values and interacting with DOM nodes.

    Available
  8. 15

    useReducer

    Explicit transitions, complex state, actions, and reducer tradeoffs.

    Available
  9. 16

    Designing custom Hooks

    Extracting reusable behavior without hiding ownership or data flow.

    Available
Part III

Component design

Create accessible component APIs with clear ownership and composition boundaries.

8 chapters
  1. 17

    State ownership and lifting state

    Finding the closest common owner and preserving a single source of truth.

    Available
  2. 18

    Controlled and uncontrolled components

    External control, local ownership, defaults, and reset behavior.

    Available
  3. 19

    Composition over configuration

    Children, slots, render APIs, and avoiding boolean-prop explosions.

    Available
  4. 20

    Designing reusable component APIs

    Constraints, defaults, escape hatches, and semantic contracts.

    Available
  5. 21

    Compound and headless components

    Shared state, flexible markup, and accessible behavior primitives.

    Available
  6. 22

    Context and provider design

    Provider boundaries, stable values, defaults, and dependency visibility.

    Available
  7. 23

    Error boundaries

    Render failures, recovery boundaries, fallbacks, and their limitations.

    Available
  8. 24

    Accessible interactive components

    Semantics, focus, keyboard behavior, announcements, and testing.

    Available
Part IV

Performance

Measure React work first, then apply targeted optimizations with explicit tradeoffs.

8 chapters
  1. 25

    Diagnosing unnecessary renders

    Render causes, profiling, state placement, and measurement discipline.

    Available
  2. 26

    Referential equality

    Object identity, dependency comparisons, props, and cascading work.

    Available
  3. 27

    memo, useMemo, and useCallback

    What each tool caches, when it helps, and when it adds noise.

    Available
  4. 28

    Context performance

    Consumer fan-out, provider splitting, selectors, and stable values.

    Available
  5. 29

    Code splitting and lazy loading

    Route and component boundaries, Suspense fallbacks, and loading cost.

    Available
  6. 30

    List virtualization

    Windowing large collections while preserving usability and accessibility.

    Available
  7. 31

    Profiling React applications

    Profiler traces, render duration, commits, and validating improvements.

    Available
  8. 32

    Transitions and deferred updates

    Urgent versus non-urgent work and keeping interactions responsive.

    Available
Part V

Modern React architecture

Reason about rendering environments, data boundaries, and application-level choices.

8 chapters
  1. 33

    Client and server rendering

    Rendering locations, navigation behavior, tradeoffs, and hybrid applications.

    Available
  2. 34

    Hydration

    Attaching behavior to server HTML, mismatches, cost, and selective hydration.

    Available
  3. 35

    Server Components

    Server and client boundaries, serialization, composition, and data access.

    Available
  4. 36

    Suspense and streaming

    Coordinated fallbacks, progressive delivery, and boundary placement.

    Available
  5. 37

    Data-fetching architecture

    Ownership, waterfalls, caching, deduplication, and framework integration.

    Available
  6. 38

    Mutations and optimistic updates

    Pending state, rollback, reconciliation, and failure handling.

    Available
  7. 39

    Forms and actions

    Form state, validation, submissions, progressive enhancement, and actions.

    Available
  8. 40

    Choosing state-management tools

    Local state, context, external stores, server state, and URL state.

    Available
Part VI

Testing and production behavior

Verify user-visible behavior and build interfaces that remain resilient under failure.

8 chapters
  1. 41

    Testing user-observable behavior

    Queries, interactions, outcomes, and avoiding implementation coupling.

    Available
  2. 42

    Unit, integration, and E2E boundaries

    Choosing the smallest test that provides meaningful confidence.

    Available
  3. 43

    Testing asynchronous UI

    Waiting for outcomes, timers, requests, race conditions, and false confidence.

    Available
  4. 44

    Strict Mode behavior

    Development checks, repeated setup and cleanup, and purity expectations.

    Available
  5. 45

    Race conditions and cancellation

    Stale responses, Effect cleanup, AbortController, and request ownership.

    Available
  6. 46

    Loading, empty, and error states

    Explicit async states, resilient transitions, and accessible feedback.

    Available
  7. 47

    Debugging React applications

    Tracing renders, state changes, Effects, warnings, and minimal reproductions.

    Available
  8. 48

    Production resilience

    Observability, recovery, defensive boundaries, and graceful degradation.

    Available
Apply the concepts

Interview scenarios live in React Practice.

Use focused exercises to turn handbook concepts into accessible, production-minded React implementations.

Explore React Practice →