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 (including across await), updater functions and their Strict Mode double-invoke, lazy init, immutability
useEffect & effects	Synchronizing with external systems, effect ordering, useEffectEvent (19.2), and abort-safe fetching
useRef & the DOM	Mutable values, DOM refs, ref-as-a-prop in React 19, ref callback cleanup, and useImperativeHandle
Memoization & the compiler	useMemo/useCallback/memo, reading real React Compiler output, and when manual memoization still matters
Rules & custom hooks	Why the rules exist, the real error when you break them, stable custom-hook returns, and the use exception
useId & the other hooks	useId, useSyncExternalStore, useDeferredValue’s initialValue, useDebugValue, and useInsertionEffect

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.

⚛️ The mental shift

A class component keeps state in this. A function component has no this and is called fresh every render — so where does its state live? In React’s memory, indexed by call order. A hook is just a function call that reads and writes one of those slots. Once you see hooks as ordered slot-access, the rules stop being arbitrary.

What is a hook?

A class method A function (named use*) that lets a component use React features like state and lifecycle while staying a function A CSS utility A type of component

How does React associate a hook call with the right piece of state?

By the hook's variable name By call order — the first hook maps to slot 1, the second to slot 2, and so on By a random id By the DOM node

Why can hooks give a plain function state and lifecycle?

Because functions secretly become classes Because React stores each component's state in its own memory, indexed by hook call order Because state is stored in the DOM Because of global variables

Submit

Mark as complete