Core Hooks Toolkit 🧰

Hooks turn functional components into living widgets. In Next.js, they’re available inside any client component ('use client').

useState 🌡️

const [value, setValue] = useState(initialValue);

• Stores local state per component instance.
• Setter can receive updater function: setValue(prev => prev + 1).

useEffect 🔄

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

• Runs after render in the browser (never on server components).
• Dependency array controls reruns; clean up subscriptions/timers.

useMemo 🧮

const filtered = useMemo(() => items.filter(match), [items, match]);

• Caches expensive computations until dependencies change.
• Avoid premature memoization—only wrap costly work.

useCallback ♻️

const handleClick = useCallback(() => doSomething(id), [id]);

• Stable function reference for memoized children or effect deps.
• Equivalent to useMemo(() => fn, deps).

useRef 📌

const inputRef = useRef<HTMLInputElement>(null);
 
useEffect(() => {
  inputRef.current?.focus();
}, []);

• Stores mutable value without causing re-renders.
• Common uses: DOM nodes, timers, previous values.

Hook Rules 📏

1. Call hooks at the top level (never inside conditionals/loops).
2. Only call from React components or custom hooks.
3. Share logic by writing useSomething custom hooks.

Analogy: hooks are backstage crew handing your component lighting (state), sound (effects), and prop storage (refs) cues.

Master these five and 90% of interactive Next.js UI becomes muscle memory. 💪