⚛️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
🐍Python Decorators Introduction
Build one mental model for Python decorators that covers closures, argument passing, functools.wraps, and stacking — then ship a working caching or logging decorator from scratch in under 30 lines.
🦀Rust Lifetimes Explained
Stop reading `'a` as line noise and start reading it as scope arithmetic — one failing snippet at a time — until you can thread lifetimes through a small parser or iterator adapter without fighting the borrow checker.
☸️Kubernetes Core Concepts
Stop drowning in 30+ resource types. Build the mental model one primitive at a time -- pods, deployments, services, ingress, config -- then deploy a real app with rolling updates and health checks.
📈Big O Intuition
Stop treating Big O as math you memorized for an interview — build the intuition to spot O(n²) disasters, pick the right data structure without thinking, and rewrite a slow function from O(n²) to O(n) in under five minutes.