Hooks In Depth

What hooks are

A hook is a function whose name starts with use that lets a component “hook into” React features — state, lifecycle, context — while staying an ordinary function. Before hooks, only class components could hold state; hooks brought that power to functions without the class boilerplate and without breaking the UI = f(state) model.

The trick is that React associates each hook call with a slot in the component’s private memory, matched by call order. That single design decision explains the Rules of Hooks, and it’s why hooks feel magical until you see the mechanism.

What this module covers

Lesson	What you’ll learn
useState & updates	State, batching, updater functions, lazy init, immutability
useEffect & effects	Synchronizing with external systems — and when you don’t need it
useRef & the DOM	Mutable values, DOM refs, and ref-as-a-prop in React 19
Memoization & the compiler	useMemo/useCallback/memo — and how the React Compiler changes the game
Rules & custom hooks	Why the rules exist, and extracting reusable stateful logic

The one thing to hold onto

flowchart LR
  render["component renders"] --> h1["useState → slot 1"]
  render --> h2["useState → slot 2"]
  render --> h3["useEffect → slot 3"]
  h1 --> note["order must be identical
every render"]
  h2 --> note
  h3 --> note

Hooks are matched to memory slots by call order

React does not know the names of your hooks — it knows the order you called them in. On every render, the first useState maps to slot 1, the second to slot 2, and so on. This is why you must never call a hook conditionally: skip one and every later hook shifts to the wrong slot. Keep that picture and the entire module clicks.