Skip to main content

React Deep Dive

My path to go from comfortable with React to understanding why it behaves the way it does — following the react.dev order top-to-bottom. The core idea underneath everything: UI = f(state) — a component is a pure function that maps state to a description of UI.

Each phase below links to its section. The focus tag says where to move fast (already known) vs. where to slow down — that's where good → pro actually happens.

Skim = read fast, I mostly know this  •  Study deeply = slow down, this is where the depth lives.

The path​

Phase 1 — Describing the UI​

Components, JSX, props, lists, and purity — how a UI is a tree of pure functions.

Focus: Skim most of it, but study "Keeping Components Pure" and "Understanding Your UI as a Tree" — they set up reconciliation.

Phase 2 — Adding Interactivity​

Events, state, and the render → commit cycle. Why state acts like a snapshot (frozen per render) and how updates queue and batch.

Focus: Study deeply — the first real "pro" gate.

Phase 3 — Managing State​

State structure, sharing/lifting state, key and how React identifies a component by its position in the tree, and reducer + context architecture.

Focus: Study deeply — especially "Preserving and Resetting State." The single most under-rated page.

Phase 4 — Escape Hatches​

Refs, and effects as synchronization (not lifecycle). The effects trilogy that finally makes dependency arrays click, plus custom hooks.

Focus: Study deeply — read "You Might Not Need an Effect" twice. Highest-leverage page in the docs.

Phase 5 — Reference: Hooks  +  APIs & Components​

Read every hook at reference depth (the Troubleshooting subsections are gold), then the advanced ones: useTransition, useDeferredValue, useSyncExternalStore, use. Plus memo, lazy, Suspense, and the Rules of React.

Focus: Reference — use it like an encyclopedia; prioritise the hooks I haven't used yet.

Phase 6 — Modern React​

The React Compiler (auto-memoization — makes manual useMemo/useCallback mostly obsolete) and Server Components with the "use client" / "use server" boundary.

Focus: The current frontier — where React is heading.

How I'm working through it: read a page → do its interactive challenges on react.dev → after each section (not page), write my takeaways here in my own words.