ReactIntermediate10h

React hooks.

useState, useEffect, useMemo, useRef — and when not to.

What is it?

Hooks are functions that let function components hold state, run side effects, and tap into React features. They follow two rules: only call at the top level, only call from React functions. The five core hooks — useState, useEffect, useRef, useMemo, useCallback — cover most real-world needs.

Why it matters

Hooks are 80% of what you'll write. Misusing useEffect is the most common pull-request comment from senior reviewers. Knowing when not to reach for useMemo is half the skill — most code is faster without it.

What to learn

  • useState for component-local state
  • useEffect for side effects (subscriptions, timers, syncing external systems)
  • useRef for values that persist without triggering re-render
  • useMemo and useCallback for skipping work, not for "performance"
  • Rules of hooks: top-level only, React functions only
  • Custom hooks: extracting reusable behavior, naming useFoo
  • The React 19 use hook for unwrapping promises and context

Common pitfall

Reaching for useEffect to derive state from props. If a value can be calculated during render, calculate it during render — no effect needed. The React 2024 docs renamed this rule "you might not need an effect"; it's the single most-quoted line for a reason.

Resources

Primary (free):

Secondary (paid):

Practice

Write a custom hook called useDebounce(value, delay) that returns the value after delay ms of no changes. Use it in a search input that fires a fetch only after the user stops typing. Done when typing fast fires one request, not one per keystroke.

Outcomes

  • Decide whether a problem needs state, a ref, or just a regular variable.
  • Write a custom hook with a clean signature and stable identity.
  • Avoid useEffect for derived values.
  • Read a useMemo call and judge whether it earned its existence.
Back to Frontend roadmap →