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.
Build a model, explain it, then apply it.
- 01Mental model
- 02Runtime behavior
- 03Code example
- 04Tradeoff
- 05Interview answer
- 06Practice
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.
Rendering model
Build the mental model behind rendering, identity, state, and updates.
- 01Available
Render and commit phases
How React calculates changes and applies them to the host environment.
- 02Available
What causes a component to render
Initial renders, state updates, parent renders, context, and external stores.
- 03Available
Reconciliation and element identity
How type, position, and identity influence reuse of component trees.
- 04Available
Keys and list rendering
Stable identity, reordering, state preservation, and common key mistakes.
- 05Available
State as a snapshot
Why each render sees a fixed state value and event handlers capture it.
- 06Available
State preservation and reset
How tree position preserves state and how to reset it intentionally.
- 07Available
Batching and functional updates
Queued updates, automatic batching, updater functions, and update order.
State and Hooks
Model application state and synchronize React with systems outside React.
- 08Available
Choosing a state structure
Grouping related values, avoiding contradictions, and normalizing state.
- 09Available
Derived and redundant state
Calculate during rendering instead of synchronizing duplicate values.
- 10Available
Rules of Hooks
Call-order identity, top-level calls, and why the rules exist.
- 11Available
Closures and state updates
Captured values, stale closures, event handlers, and safe updates.
- 12Available
useEffect as synchronization
Effects as a bridge to external systems rather than lifecycle callbacks.
- 13Available
Effect dependencies and cleanup
Reactive dependencies, teardown, race conditions, and idempotence.
- 14Available
useRef and mutable values
Persisting non-rendering values and interacting with DOM nodes.
- 15Available
useReducer
Explicit transitions, complex state, actions, and reducer tradeoffs.
- 16Available
Designing custom Hooks
Extracting reusable behavior without hiding ownership or data flow.
Component design
Create accessible component APIs with clear ownership and composition boundaries.
- 17Available
State ownership and lifting state
Finding the closest common owner and preserving a single source of truth.
- 18Available
Controlled and uncontrolled components
External control, local ownership, defaults, and reset behavior.
- 19Available
Composition over configuration
Children, slots, render APIs, and avoiding boolean-prop explosions.
- 20Available
Designing reusable component APIs
Constraints, defaults, escape hatches, and semantic contracts.
- 21Available
Compound and headless components
Shared state, flexible markup, and accessible behavior primitives.
- 22Available
Context and provider design
Provider boundaries, stable values, defaults, and dependency visibility.
- 23Available
Error boundaries
Render failures, recovery boundaries, fallbacks, and their limitations.
- 24Available
Accessible interactive components
Semantics, focus, keyboard behavior, announcements, and testing.
Performance
Measure React work first, then apply targeted optimizations with explicit tradeoffs.
- 25Available
Diagnosing unnecessary renders
Render causes, profiling, state placement, and measurement discipline.
- 26Available
Referential equality
Object identity, dependency comparisons, props, and cascading work.
- 27Available
memo, useMemo, and useCallback
What each tool caches, when it helps, and when it adds noise.
- 28Available
Context performance
Consumer fan-out, provider splitting, selectors, and stable values.
- 29Available
Code splitting and lazy loading
Route and component boundaries, Suspense fallbacks, and loading cost.
- 30Available
List virtualization
Windowing large collections while preserving usability and accessibility.
- 31Available
Profiling React applications
Profiler traces, render duration, commits, and validating improvements.
- 32Available
Transitions and deferred updates
Urgent versus non-urgent work and keeping interactions responsive.
Modern React architecture
Reason about rendering environments, data boundaries, and application-level choices.
- 33Available
Client and server rendering
Rendering locations, navigation behavior, tradeoffs, and hybrid applications.
- 34Available
Hydration
Attaching behavior to server HTML, mismatches, cost, and selective hydration.
- 35Available
Server Components
Server and client boundaries, serialization, composition, and data access.
- 36Available
Suspense and streaming
Coordinated fallbacks, progressive delivery, and boundary placement.
- 37Available
Data-fetching architecture
Ownership, waterfalls, caching, deduplication, and framework integration.
- 38Available
Mutations and optimistic updates
Pending state, rollback, reconciliation, and failure handling.
- 39Available
Forms and actions
Form state, validation, submissions, progressive enhancement, and actions.
- 40Available
Choosing state-management tools
Local state, context, external stores, server state, and URL state.
Testing and production behavior
Verify user-visible behavior and build interfaces that remain resilient under failure.
- 41Available
Testing user-observable behavior
Queries, interactions, outcomes, and avoiding implementation coupling.
- 42Available
Unit, integration, and E2E boundaries
Choosing the smallest test that provides meaningful confidence.
- 43Available
Testing asynchronous UI
Waiting for outcomes, timers, requests, race conditions, and false confidence.
- 44Available
Strict Mode behavior
Development checks, repeated setup and cleanup, and purity expectations.
- 45Available
Race conditions and cancellation
Stale responses, Effect cleanup, AbortController, and request ownership.
- 46Available
Loading, empty, and error states
Explicit async states, resilient transitions, and accessible feedback.
- 47Available
Debugging React applications
Tracing renders, state changes, Effects, warnings, and minimal reproductions.
- 48Available
Production resilience
Observability, recovery, defensive boundaries, and graceful degradation.
Interview scenarios live in React Practice.
Use focused exercises to turn handbook concepts into accessible, production-minded React implementations.