React Hooks Cheat Sheet: useState, useEffect, useMemo, useRef & Rules

Hooks are functions whose names start with use. They let function components hold state and side effects. Call them at the top level, not in conditions. useState stores UI values, useEffect runs after commit, useRef holds a mutable box, and useMemo/useCallback skip work when dependencies have not changed.

This React cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Rules: Only call hooks at the top of React functions. Same order every render.
• useState: Replace objects/arrays; do not mutate. Functional updater when next depends on prev.
• useEffect: After paint. Cleanup subscriptions. List dependencies honestly.
• useLayoutEffect: Before paint, DOM measurements. Rare on the web; skipped/warned on SSR.
• useRef: Does not trigger render. DOM nodes and timer ids.
• useMemo: Cache an expensive calculation. Not a semantics guarantee in all future React versions — still a hint.
• useCallback: Stable function identity for memoized children or effect deps.
• useContext: Read a context. Split providers so unrelated updates do not rerender the world.

Copy-paste examples

Debounced value hook

Custom hooks start with use. Cleanup the timeout so fast typing does not leak timers.

import { useEffect, useState } from 'react';

export function useDebounced(value, ms = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), ms);
    return () => clearTimeout(t);
  }, [value, ms]);
  return v;
}

Effect with abort

Abort fetch on unmount or when id changes so a slow response cannot overwrite newer data.

import { useEffect, useState } from 'react';

export function useProject(id) {
  const [data, setData] = useState(null);
  useEffect(() => {
    const ctrl = new AbortController();
    fetch('/api/project.php?id=' + id, { signal: ctrl.signal })
      .then((r) => r.json())
      .then(setData)
      .catch((err) => {
        if (err.name !== 'AbortError') setData(null);
      });
    return () => ctrl.abort();
  }, [id]);
  return data;
}

Common mistakes

• Putting hooks after an early return — order breaks.
• Empty dependency arrays while closing over changing props (stale data).
• Wrapping every function in useCallback with no measured child re-render problem.
• Using useEffect to transform data that could be computed during render.

FAQ

1. Can I use hooks in class components? No. Write a function child or convert the class.

1. useEffect vs event handler? Handlers run because the user did something. Effects run because React committed and deps changed. Do not fetch on every keystroke in an effect without debounce.

1. Why is my effect running twice in dev? React Strict Mode double-invokes to surface missing cleanup. Fix the cleanup, do not blindly remove Strict Mode.

Related React cheat sheets

• React Js Cheat Sheet 2026
• React Jsx Cheat Sheet
• React Vs React Native Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.