React Developer Cheat Sheet (Hooks, Patterns and the useEffect Rules)

React Developer Cheat Sheet

React has about eight hooks you will use regularly and one — useEffect — that causes most of the bugs.

This sheet is weighted accordingly. The hooks reference is short; the useEffect section is long, because the dependency rules are rules rather than intuition, which is exactly what belongs on a reference card.

Updated for 2026. React 19; notes where behaviour differs from React 18.

The Hooks You Actually Use

Everything else is either rare or framework-specific.

useState

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);
const [items, setItems] = useState(() => expensiveInit());   // lazy init

setCount(5);                        // direct
setCount(c => c + 1);               // functional — use when based on previous
setUser(u => ({ ...u, name: "New" }));   // immutable object update
setItems(i => [...i, newItem]);          // immutable array update

Use the functional form whenever the new value depends on the old one. State updates are batched, so this breaks:

setCount(count + 1);
setCount(count + 1);    // both read the same stale `count` — result is +1

and this works:

setCount(c => c + 1);
setCount(c => c + 1);   // +2

Never mutate state. items.push(x) followed by setItems(items) does nothing — the reference is unchanged, so React sees no update. Always create a new array or object.

Lazy initialisation — useState(() => expensive()) runs the function only on the first render. useState(expensive()) runs it on every render and throws the result away, which is a silent performance drain.

useEffect — The Long Section

useEffect(() => {
  // effect body
  return () => {
    // cleanup — runs before the next effect and on unmount
  };
}, [dep1, dep2]);

What goes in the array

Every reactive value the effect body reads — props, state, context, and anything defined during render. Not refs. Not setState functions, which React guarantees are stable.

The mental model that helps: the array is not a list of triggers. It is a list of things the effect uses, and React re-synchronises when any of them change.

Why it loops forever

Almost always because a dependency changes identity every render:

// BROKEN — new object every render → effect fires → setState → render → repeat
const options = { limit: 10 };
useEffect(() => { fetchData(options); }, [options]);

Objects, arrays, and functions compare by reference. { limit: 10 } is a different object each render even though it looks identical.

Three fixes, best first:

// 1. move it inside — no longer a dependency
useEffect(() => {
  const options = { limit: 10 };
  fetchData(options);
}, []);

// 2. depend on a primitive instead of the object
useEffect(() => { load(user.id); }, [user.id]);   // not [user]

// 3. stabilise the identity
const options = useMemo(() => ({ limit: 10 }), []);

Do not silence the linter. The exhaustive-dependencies rule is right far more often than it is wrong. If you want to remove a dependency, the real problem is usually that the effect is doing something that is not synchronisation.

Cleanup

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal }).then(setData);
  return () => controller.abort();     // cancel stale requests
}, [url]);

Every subscription, timer, listener, and in-flight request needs cleanup. Without it you get memory leaks and — worse — race conditions where a slow response from an old request overwrites a fast response from a new one.

What useEffect is not for

Not for data fetching in new code. Doing it correctly means hand-writing loading state, error state, race handling, cleanup, caching, and refetching. Use TanStack Query or SWR, or fetch at the framework level in Next.js.

Not for deriving state from props. Just compute it during render:

// unnecessary
const [full, setFull] = useState("");
useEffect(() => { setFull(`${first} ${last}`); }, [first, last]);

// correct
const full = `${first} ${last}`;

useEffect is for synchronising with something outside React — a WebSocket, a browser API, a non-React widget.

useRef

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

const renderCount = useRef(0);
renderCount.current++;          // mutating does NOT re-render

Two distinct uses: reaching a DOM node, and holding a mutable value that should survive renders without causing them. Changing .current never triggers a re-render — if you need the UI to update, you need state, not a ref.

Lists and Keys

{items.map(item => (
  <Item key={item.id} {...item} />
))}

Use a stable id, not the array index. The key tells React which component instance corresponds to which item. Index keys match by position, so reordering, filtering, or inserting anywhere but the end attaches component state — focus, scroll, input values — to the wrong item.

Index keys are safe only when the list never reorders and items are only appended.

Performance

const Memoized = React.memo(Component);            // skip re-render if props equal
const value = useMemo(() => expensive(a, b), [a, b]);
const handler = useCallback(() => doThing(id), [id]);

Measure before optimising. All three have a real cost: they allocate, they compare dependencies on every render, and they add noise.

Use useMemo when a computation genuinely shows in a profiler, or when the value is passed where reference identity matters. Use useCallback when the function goes to a React.memo child or into another hook's dependencies.

React 19's compiler handles most of this automatically. In new code, manual memoisation should be the exception.

The most common performance mistake is not missing memoisation — it is defining a component inside another component:

// BROKEN — new component type every render, full remount, state lost
function Parent() {
  function Child() { return <div />; }
  return <Child />;
}

Define components at module level. Always.

Forms

// controlled
const [value, setValue] = useState("");
<input value={value} onChange={e => setValue(e.target.value)} />

// uncontrolled — often simpler
const ref = useRef();
<input ref={ref} defaultValue="x" />

For anything beyond three fields, use a form library — React Hook Form is the common choice — rather than hand-rolling validation and touched state.

Conditional Rendering

{isLoggedIn && <Dashboard />}
{isLoggedIn ? <Dashboard /> : <Login />}
{items.length > 0 && <List items={items} />}

The && trap with numbers:

{items.length && <List />}    // renders "0" when the array is empty

0 is falsy, so && returns 0 — and React renders the number zero into your page. Compare explicitly: items.length > 0 &&.

Custom Hooks

Any function starting with use that calls other hooks:

function useDebounce(value, delay = 500) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

Custom hooks share logic, not state. Two components using useDebounce each get their own independent state.

The Five Mistakes

1. Mutating state. items.push(x) then setItems(items) does nothing. Create a new array.

2. Object or function dependencies in useEffect. New identity every render, infinite loop. Depend on primitives.

3. Array index as key. Breaks the moment the list reorders.

4. Defining a component inside a component. Full remount every render, all state lost.

5. {count && <X />} where count can be 0. Renders a literal 0. Use an explicit comparison.

Print This Section

STATE     setCount(c => c + 1)      when based on previous
          setItems(i => [...i, x])  never mutate

EFFECT    deps = everything the body reads (not refs, not setState)
          infinite loop → an object/function dep → use a primitive
          always clean up: intervals, listeners, fetch (AbortController)
          NOT for fetching (use TanStack Query) or deriving state

KEYS      stable id, never the array index

PERF      measure first · React 19 compiler handles most memoisation
          never define a component inside a component

TRAP      {count && <X/>} renders "0"  →  {count > 0 && <X/>}

Most React bugs are useEffect bugs, and most useEffect bugs are dependency-identity bugs. Learning why an object dependency loops is worth more than learning the other seven hooks combined.

🔗 Next in this collection: CSS and Tailwind Cheat Sheet, or return to The Complete Developer Cheat Sheet Collection.