⚛️React Hooks Mental Model
Build one mental model for React hooks — each render is a snapshot, and every hook either reads from it or syncs the outside world to it — then use that model to fix stale closures, tame dependency arrays, and extract clean custom hooks from a real component.
Phase 1Why Hooks Exist and the Rules Behind Them
See why hooks exist and the rules that keep them sane
Every render is its own frozen snapshot
6 minEvery render is its own frozen snapshot
Hooks are a list indexed by call order
6 minHooks are a list indexed by call order
useState is two things — a value and a setter pair
6 minuseState is two things — a value and a setter pair
useEffect syncs the outside world to your snapshot
7 minuseEffect syncs the outside world to your snapshot
Phase 2Stale Closures and Dependency Array Traps
Fix stale closures and dependency array traps with confidence
Your callback is reading yesterday's state
7 minYour callback is reading yesterday's state
The dependency array isn't a re-run list — it's a promise
7 minThe dependency array isn't a re-run list — it's a promise
Updater functions escape the stale closure trap
6 minUpdater functions escape the stale closure trap
useRef is a mutable box that doesn't trigger renders
7 minuseRef is a mutable box that doesn't trigger renders
Effects run after paint; layout effects run before
6 minEffects run after paint; layout effects run before
Phase 3Choosing Between useState, useReducer, useMemo, useCallback
Choose between useState, useReducer, useMemo, and useCallback
The form with five fields and growing
6 minThe form with five fields and growing
The list that re-renders the world
7 minThe list that re-renders the world
The hook that fetches — and refetches forever
7 minThe hook that fetches — and refetches forever
The hook that feels like it wants to be custom
6 minThe hook that feels like it wants to be custom
Phase 4Extract a Custom Hook From Real Code
Extract a clean custom hook from a tangled real component
Extract a reusable custom hook from a real component
8 minExtract a reusable custom hook from a real component
Frequently asked questions
- Why do React hooks have to be called in the same order every render?
- This is covered in the “React Hooks Mental Model” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- What exactly is a stale closure in a React component?
- This is covered in the “React Hooks Mental Model” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- When should I use useReducer instead of useState?
- This is covered in the “React Hooks Mental Model” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- Do I really need useCallback and useMemo everywhere?
- This is covered in the “React Hooks Mental Model” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- How do I know when to extract a custom hook?
- This is covered in the “React Hooks Mental Model” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
Related paths
🐳Docker Containers Basics
Build the mental model first, then the commands — from containers vs VMs through images, layers, volumes, and networking to composing a multi-service app.
🧪Property-Based Testing
Go beyond example-based tests — learn to express what your code should always do, then let a framework find the inputs that break it.
🦀Rust's Ownership Model
Build a working mental model of Rust's ownership system — from stack vs heap intuition through borrow checker mastery — so you can read and write Rust without fighting the compiler.
💻Elixir Pattern Matching
Stop reading `=` as assignment and start using it as Elixir's core flow-control tool — through function heads, guards, and `with` — until you can rewrite a tiny command parser without a single `if`.