Skip to content

React Hooks Advanced Patterns Textbook

A free, self-paced textbook in 7 chapters. Read a chapter, then drill it with the 224 companion flashcards using spaced repetition.

7 chapters · 224 cards · Updated

Chapters

  1. 1Foundations: Rules, StrictMode, and the Hook Mental Model

    React Hooks come with two hard rules that govern where and how they can be called. First, hooks must always be invoked at the top level of a React function — inside a component or...

  2. 2useEffect and Side Effects: Patterns and Pitfalls

    useEffect is the standard place to synchronize a component with an external system: subscriptions, timers, DOM mutations, analytics, and network requests. Three dependency-array sh...

  3. 3Refs, Stale Closures, and Imperative Escapes

    useRef returns a mutable container whose .current property persists across renders without triggering a re-render when mutated. That makes it the right tool for storing DOM nodes,...

  4. 4Memoization and Render Performance

    Three primitives form the foundation of render performance work. useMemo(factory, deps) memoizes the result of factory and recomputes only when a dep changes. useCallback(fn, deps)...

  5. 5State Management: useReducer, Context, and External Stores

    useReducer is the right primitive when the next state depends on the previous state, when the state shape is complex (nested objects, multiple sub-fields), or when updates are bett...

  6. 6Custom Hooks: Reusable Patterns

    Custom hooks are just functions whose names start with use and that call other hooks. The prefix is not cosmetic — React's linter and DevTools use it to recognize hook calls and su...

  7. 7Concurrent Features, React 19 Hooks, and Server Architecture

    React 18 introduced two primitives for keeping the UI responsive during heavy work. useTransition returns [isPending, startTransition] and lets you mark a state update as low-prior...

← Back to the React Hooks Advanced Patterns deck