● React Deep Dive

concept bundles — hooks mastery → patterns → concurrent React → performance → animations → TanStack Router ← all tutorials

🔗 Companion section Where ../frontend/react/ (4 bundles) teaches the basics, this section goes deep. frontend/react/ →

Phase 1 — Hooks Mastery

The foundation of advanced React: useReducer, useRef, useMemo, Context, custom hooks, useLayoutEffect.

01 ★

dispatch table, state machines

anchor 02

mutable refs, DOM access, timers

03

useMemo & useCallback

memoization, referential equality

04

Provider/Consumer, context splits

05

useDebounce, useLocalStorage, useFetch

06

useLayoutEffect

paint timing, DOM measurement

Phase 2 — Component Patterns

Composition techniques for flexible, reusable component APIs.

07

Compound Components

implicit state via context

08

function-as-child composition

09

Headless UI Pattern

state reducer + prop getters

10

Controlled vs Uncontrolled

form inputs, key-based reset

11

Error Boundaries

catching render errors, fallback UI

12

forwardRef & useImperativeHandle

exposing child APIs to parents

Phase 3 — Concurrent React & React 19

Suspense, transitions, deferred values, external stores, form actions.

13

Suspense Patterns

declarative loading, throw-promise

14

urgent vs non-urgent updates

15

useDeferredValue

deferring expensive renders

16

useSyncExternalStore

external subscriptions (Zustand pattern)

17

React 19 Actions

useActionState, useFormStatus, useOptimistic

Phase 4 — Performance

React.memo, re-render profiling, virtualized lists, code splitting.

18

preventing re-renders, shallow compare

19

Re-render Profiling

flamegraph, commit reasons

20

windowing, visible-range calculation

21

Lazy & Suspense

React.lazy, dynamic import

Phase 5 — Animations

CSS transitions, View Transitions API, Framer Motion, spring physics.

22

CSS Animations in React

FLIP technique, state toggles

23

View Transitions API

crossfade, shared elements

24

Framer Motion Core

motion components, gestures

25

damping, stiffness, natural motion

26

Animation Orchestration

variants, stagger, AnimatePresence

Phase 6 — TanStack Router Deep Dive

The full course: route tree internals, type inference, loaders, search params, preloading, nested context, code splitting, auth patterns, devtools.

27

Router Fundamentals

route tree, history, matching

intro 28

Route Tree Internals

compilation, linearization, matching

29

how definitions propagate types

30

Search Param Validation

Zod/Valibot schemas, defaults

killer feature 31

Loader Lifecycle

beforeLoad → loader → component

32

Navigation & Preloading

intent-based, dedup, prefetch

33

Nested & Context

Outlet, layout routes, context flow

34

createLazy, route-level splitting

35

Advanced Patterns

auth routes, blocking, masking

36

route tree viz, inspector, profiling

Each bundle = a working zero-dep .html demo with a [check: OK] gold-check + a static .md guide. Styling: Tailwind v4 via CDN. React 19 via ESM CDN + Babel standalone. Workflow: ../skills/concept-builder/SKILL.md. Build plan: TODO.md.