Learning Roadmap

This site is intentionally split by intent: Learn (skills), Guides (work), Reference (contracts), and Explanation (mechanisms). The roadmap below tells you what to read, in what order, and why.

Three paths (pick one, then branch)

• Product path: quickly build reliable UI features (forms, data fetching, routing, testing).
• Performance & UX path: concurrency primitives, Suspense boundaries, profiling, list virtualization.
• Mechanisms path: rendering model, scheduling, effects semantics, SSR/streaming/RSC mental models.

Dependencies (mental model first)

React topics are not independent. If you learn them in the wrong order, you end up memorizing APIs without understanding why they work.

Foundations
  -> Components/JSX/Props
  -> State model (render is a pure calculation)
  -> Render vs Commit (what can happen during render?)
  -> Effects (sync vs async side effects, cleanup, consistency)

Interactivity
  -> Event handling and state updates
  -> Derived state / lifting state / composition
  -> Context (prop drilling vs global dependencies)

React 19 & Concurrency
  -> Priority: urgent updates vs transitions
  -> Suspense boundaries (progressive rendering, avoid waterfalls)
  -> Server rendering (streaming) and client hydration constraints

Production practices
  -> Forms & Actions (pending/error/success as contracts)
  -> Data fetching & caching (where state lives, consistency boundaries)
  -> Performance (profile, then optimize)
  -> Testing/Debugging/Security/Accessibility

What to read next (linked)

1. React 19 overview
2. Render and Commit
3. useEffect (learn) + useEffect (reference)
4. Suspense (learn) + Suspense (reference)
5. Forms (guides) + useActionState
6. SSR & RSC
7. Performance + Testing

Coverage map (what you should be able to explain)

• Rendering: what runs during render vs commit; why render must be pure.
• State: local state, derived state, shared dependencies (context), and external stores.
• Effects: what they are for, when they re-run, cleanup, and how to avoid stale closures.
• Concurrency: urgent vs transition updates, how Suspense changes UI readiness.
• Production: forms/actions, data fetching, performance, testing, security, accessibility.

Planned deep dives (non-linked)

• Actions contracts: pending/error/success, retries, and optimistic updates.
• Suspense in practice: boundary placement, streaming SSR, and avoiding waterfalls.
• Scheduling mental model: priority lanes and why concurrency is about UX, not speed.
• Effect correctness: StrictMode, idempotency, and resource lifecycles.