The Complete Guide to React Hooks in 2026

React Hooks let function components use state, side effects and other React features. This complete guide covers the core hooks you’ll use daily, the performance hooks, the new React 19 additions (use, Actions, useOptimistic), and how to write your own — with the rules and common mistakes throughout. It reflects React 19, the current mainstream version.

The Rules of Hooks

Two rules make hooks work, enforced by eslint-plugin-react-hooks:

• Call hooks only at the top level of a component or custom hook — never inside conditions, loops or nested functions (the one exception is the new use API).
• Call hooks only from React function components or custom hooks — not plain JavaScript functions.

These rules let React reliably associate each hook call with the right piece of state across renders.

useState

useState adds local reactive state. It returns the current value and a setter; calling the setter re-renders the component. Use the updater form when the next value depends on the previous one.

const [count, setCount] = useState(0);
setCount(count + 1);           // fine
setCount(c => c + 1);          // safer when batching/depending on prev

useEffect

useEffect synchronizes your component with external systems — network, subscriptions, non-React DOM. It runs after render; the dependency array controls when it re-runs, and the returned function cleans up. A common mistake is using effects for things that aren’t external systems.

useEffect(() => {
  const sub = source.subscribe(handle);
  return () => sub.unsubscribe();   // cleanup
}, [source]);                        // re-run when `source` changes

useContext

useContext reads a Context value, avoiding prop-drilling for shared, slow-changing data like theme, locale or the current user. Every consumer re-renders when the context value changes, so keep high-frequency state out of context.

const theme = useContext(ThemeContext);

useRef

useRef gives you a mutable box that persists across renders without causing a re-render when it changes. Two main uses: referencing a DOM node, and holding a mutable value (a timer id, a previous value) that shouldn’t trigger rendering.

const inputRef = useRef(null);
// <input ref={inputRef} />
inputRef.current.focus();     // imperative DOM access

useReducer

useReducer manages state through a reducer function — ideal when the next state depends on the previous one or when updates involve several related fields or complex transitions. It’s useState’s more structured sibling.

function reducer(state, action) {
  switch (action.type) {
    case "inc": return { count: state.count + 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: "inc" });

useMemo and useCallback

useMemo caches an expensive computed value between renders; useCallback caches a function’s identity so memoized children don’t re-render. In 2026, the React Compiler does most of this automatically — reach for these manually only when you’ve measured a need or the compiler isn’t enabled.

const sorted = useMemo(() => bigList.slice().sort(cmp), [bigList]);
const onSelect = useCallback(id => setSelected(id), []);
// With the React Compiler enabled, most of these become unnecessary.

useTransition and useDeferredValue

These keep the UI responsive during expensive updates. useTransition marks a state update as non-urgent and gives you isPending; useDeferredValue lets an expensive child lag behind a fast-changing value so typing stays smooth.

const [isPending, startTransition] = useTransition();
function onChange(e) {
  setText(e.target.value);                       // urgent
  startTransition(() => setQuery(e.target.value)); // non-urgent
}

const deferredQuery = useDeferredValue(query);

React 19 additions

React 19 introduced Actions and several new hooks for async and form workflows:

• use — read a promise or context during render; unlike other hooks it *can* be called conditionally. Suspends while a promise is pending.
• Actions — async functions used in transitions or as a <form action={…}>; they auto-manage pending state, errors and optimistic updates.
• useActionState — wraps an Action, returning [state, dispatch, isPending] with the Action’s last result.
• useOptimistic — show an immediate optimistic value while an async Action is in flight, reconciling when it completes.
• useFormStatus (from react-dom) — read the pending status of the enclosing <form> from a child component.

// optimistic UI while an Action runs
const [optimisticLikes, addOptimistic] = useOptimistic(likes);
async function like() {
  addOptimistic(optimisticLikes + 1);
  await saveLike();     // reverts automatically if this throws
}

Custom hooks

A custom hook is a function whose name starts with use and that calls other hooks — the way you extract and reuse stateful logic. Each call gets its own isolated state; the use prefix is what lets the linter treat it as a hook.

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() =>
    JSON.parse(localStorage.getItem(key)) ?? initial);
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

Common mistakes

• Using an Effect for derived state — compute it during render instead.
• Missing or wrong dependency arrays — let the linter drive deps; fix by restructuring, not by lying to the array.
• Stale closures — a callback capturing old state; fix with correct deps, the updater form, or useEffectEvent.
• Putting event logic in Effects — handle user events in event handlers.
• Over-memoizing — with the React Compiler, most manual useMemo/useCallback is unnecessary.

Build and run React components live in XCODX Studio — npm packages in the browser, no setup. See also React best practices, how to optimize React performance and best React libraries.