React Interview Questions, Actually Explained

Practically, no — for new code. Hooks (introduced in React 16.8) gave function components everything classes could do, with less boilerplate and no this-binding footguns. The one real gap: there is still no hook equivalent for componentDidCatch/getDerivedStateFromError, so error boundaries remain classes. Everything else below is why function + hooks won by default.

Props are how a parent configures a child — they flow one way, down, and a component must never mutate its own props. State is data a component owns and manages itself, and changing it (via setState/useState's setter) is what triggers a re-render. A useful test: if the value is handed to you from outside, it's a prop; if you're the one deciding when it changes, it's state. A very common bug is copying a prop into state with useState(prop) and expecting it to stay in sync — it won't, because the initial value is only read once.

Inside a single event handler, count is a constant captured from that render's closure — it doesn't change between the two calls. setCount(count + 1) run twice just tells React "set it to count+1" twice, which is the same instruction repeated, not two increments. The functional-update form fixes this by receiving the latest pending value instead of the stale closed-over one.

// Bug: both calls read the same stale `count` from this render's closure.
setCount(count + 1);
setCount(count + 1); // count is STILL +1, not +2

// Fix: the updater function always receives the latest queued value.
setCount((c) => c + 1);
setCount((c) => c + 1); // now genuinely +2

useEffect re-runs its callback whenever any value in the dependency array changed since the last render (by ===). The two mistakes that show up constantly: omitting a dependency the effect actually reads (stale-data bugs), and putting an object/array/function literal in the array that gets a new reference every render (infinite-loop bugs, since a new reference always counts as "changed"). The cleanup function returned from the effect runs before the next execution and on unmount — it's the one place to undo subscriptions, timers, or listeners so they don't leak.

useEffect(() => {
  const id = setInterval(() => setTick((t) => t + 1), 1000);
  // Cleanup — without this, every re-render (or unmount) leaves the old
  // interval running in the background, ticking a state setter for a
  // component that may no longer exist.
  return () => clearInterval(id);
}, []); // empty array = run once on mount, clean up once on unmount

• If the effect doesn't read any props/state, [] is correct and safe.
• If it does, list every one of them — the exhaustive-deps ESLint rule exists because "I know better" is usually the bug.
• An effect that only responds to a click shouldn't be an effect at all — put that logic directly in the event handler.

Both exist to preserve a stable reference across renders — useMemo memoizes a computed value, useCallback memoizes a function (and is literally useMemo(() => fn, deps) under the hood). Neither one is free: they cost a comparison and a cache slot every render. They earn their keep in exactly two situations — an expensive computation you don't want to redo every render, or a value/function passed as a prop to a React.memo-wrapped child, where a new reference every render would defeat the memoization entirely.

const sorted = useMemo(
  () => [...items].sort((a, b) => a.price - b.price),
  [items],
);

// Stable reference so <ExpensiveChild /> (wrapped in React.memo) doesn't
// re-render just because the parent re-rendered with a fresh arrow function.
const handleSelect = useCallback((id) => setSelectedId(id), []);

return <ExpensiveChild items={sorted} onSelect={handleSelect} />;

A ref is a mutable box that survives re-renders without causing one when it changes — the opposite of state. Past DOM access, that makes it the right tool for anything you need to remember across renders but never want to render: a previous value for comparison, a mutable counter, an interval/timeout id, or a flag like "has this already run."

// A classic custom hook: track the PREVIOUS render's value.
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value; // runs AFTER render, so it always lags by one
  }, [value]);
  return ref.current;
}