State & Effects — Cheat Sheet

useState — The Core of Everything

const [count, setCount] = useState(0)

function handleClick() {
  setCount(count + 1)
  console.log(count)        // still 0 — this render's snapshot
}

// Two updates from the same snapshot collapse into one
function handleDouble() {
  setCount(count + 1)       // 0 + 1
  setCount(count + 1)       // 0 + 1 again -> ends at 1, not 2
}

// The functional updater reads the latest queued value
function handleDoubleFixed() {
  setCount(c => c + 1)      // 0 -> 1
  setCount(c => c + 1)      // 1 -> 2
}

// Rule of thumb: if the next value depends on the previous one,
// always use the function form.

Structuring State — Where It Lives and What Belongs In It

// Redundant — two sources of truth that can drift apart
const [problems, setProblems] = useState([])
const [count, setCount] = useState(0)              // derivable
const [hasResults, setHasResults] = useState(false) // derivable
const [selected, setSelected] = useState(null)      // storing the whole object

// Derived during render — cannot be stale, by construction
const [problems, setProblems] = useState([])
const [selectedId, setSelectedId] = useState(null)

const count = problems.length
const hasResults = problems.length > 0
const selected = problems.find(p => p.id === selectedId)

// Store the ID, not the object. If the object is refetched and
// updated, a stored copy silently becomes the old version.

// "But it recalculates every render" — filtering a few hundred rows
// is microseconds. Measure before caching it with useMemo.

useEffect — Synchronising With the Outside World

useEffect(() => {
  // setup — runs after the browser has painted
  const es = new EventSource(`/api/jobs/${jobId}/progress`)
  es.onmessage = (e) => setProgress(JSON.parse(e.data))

  return () => es.close()      // cleanup — before the next run, and on unmount
}, [jobId])                    // dependencies

// The dependency array is not a trigger list. It is a claim:
// "this setup reads exactly these values." React re-runs the effect
// when any of them changed since last time.

// The three forms
useEffect(fn)           // after EVERY render — almost always a mistake
useEffect(fn, [])       // once on mount, cleanup on unmount
useEffect(fn, [a, b])   // when a or b changed

// Effects run after paint, so the user sees the render first.
// useLayoutEffect runs before paint — use it only to measure or
// position something the user must never see in the wrong place.

Cleanup and Race Conditions

useEffect(() => {
  const id = setInterval(tick, 1000)
  return () => clearInterval(id)       // write this immediately
}, [])

// Order when a dependency changes from A to B:
//   cleanup(A)  ->  setup(B)
// So the effect is always torn down before it is set up again.

// Anything you START, you must STOP:
setInterval / setTimeout      -> clearInterval / clearTimeout
addEventListener              -> removeEventListener
new EventSource / WebSocket   -> .close()
observer.observe              -> observer.disconnect()
a library's init()            -> its destroy()

// Without cleanup: the handler still holds the old props in its
// closure, keeps the component in memory, and fires setState on
// something unmounted — a leak, plus stale behaviour.

You Probably Do Not Need That Effect

// Unnecessary — an extra render, and one frame of the wrong value
const [problems, setProblems] = useState([])
const [visible, setVisible] = useState([])
useEffect(() => {
  setVisible(problems.filter(p => p.difficulty === level))
}, [problems, level])

// Just compute it
const visible = problems.filter(p => p.difficulty === level)

// Same for totals, counts, formatted values, sorted copies.
// If it is expensive AND you have measured it, wrap in useMemo:
const visible = useMemo(
  () => problems.filter(p => p.difficulty === level),
  [problems, level],
)
// but "expensive" means thousands of items, not dozens.

useRef — DOM Access and Values That Do Not Render

function SearchBox() {
  const inputRef = useRef(null)

  useEffect(() => {
    inputRef.current?.focus()        // available after mount
  }, [])

  return <input ref={inputRef} />
}

// current is null during the first render — the DOM does not exist
// yet — so always use optional chaining.

// Real uses: focus management, scrolling into view, measuring,
// play/pause on media, and passing a node to a library.
node.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
const { height } = node.getBoundingClientRect()

// Forwarding a ref to your own component
const Input = forwardRef(function Input(props, ref) {
  return <input ref={ref} {...props} />
})
// In React 19, ref is a normal prop and forwardRef is no longer needed.

useReducer — State With Rules

const initial = { status: 'idle', code: '', results: null, error: null }

function reducer(state, action) {
  switch (action.type) {
    case 'edit':    return { ...state, code: action.code }
    case 'run':     return { ...state, status: 'running', error: null }
    case 'passed':  return { ...state, status: 'passed', results: action.results }
    case 'failed':  return { ...state, status: 'failed', error: action.error }
    case 'reset':   return initial
    default:        throw new Error(`Unknown action: ${action.type}`)
  }
}

function Solver() {
  const [state, dispatch] = useReducer(reducer, initial)

  async function run() {
    dispatch({ type: 'run' })
    try {
      dispatch({ type: 'passed', results: await execute(state.code) })
    } catch (e) {
      dispatch({ type: 'failed', error: e.message })
    }
  }
}

// The reducer must be pure: no fetching, no timers, no mutation.
// Async work happens around it, in handlers or effects.

StrictMode, Purity and Concurrent Rendering

// Impure — mutating a prop or module variable during render
let renderCount = 0
function Bad({ items }) {
  renderCount++                     // side effect during render
  items.sort()                      // mutating a prop
  document.title = 'Problems'       // DOM write during render
  return <List items={items} />
}

// Pure
function Good({ items }) {
  const sorted = [...items].sort()
  useEffect(() => { document.title = 'Problems' }, [])
  return <List items={sorted} />
}

// Impure in a subtler way — the output depends on something that
// can change between two calls with the same props:
function Row() { return <li>{Math.random()}</li> }
function Row2() { return <li>{new Date().toISOString()}</li> }
// Both break double-render checks and server rendering (hydration
// mismatch: the server produced one value, the client another).

Stale Closures and Update Timing

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1)      // 'count' is 0 in this closure, forever
    }, 1000)
    return () => clearInterval(id)
  }, [])                       // set up once — captures the first render

  return <p>{count}</p>        // goes 0 -> 1, then stops
}

// Every tick computes 0 + 1. The interval was created during the
// first render and closed over that render's count.

// Fix 1 — the functional updater. React supplies the current value,
// so the closure does not need it:
setCount(c => c + 1)           // correct, and the deps stay empty

// Fix 2 — depend on it honestly, accepting the effect re-runs:
useEffect(() => {
  const id = setInterval(() => setCount(count + 1), 1000)
  return () => clearInterval(id)
}, [count])                    // tears down and recreates each second