5 exercises — useCallback vs useMemo, React Server Components, startTransition, Suspense, and stale-while-revalidate — key React vocabulary for modern frontend engineers.
0 / 5 completed
1 / 5
A code review comment says: "Use useCallback here, not useMemo." What is the key difference?
useCallback(fn, deps) returns a memoized function — the same function reference across renders as long as deps do not change. Use it to stabilise a callback passed to a child component wrapped in React.memo. useMemo(fn, deps) returns a memoized value — the result of calling fn. Use it for expensive computations. A common mistake is reaching for both too early: only memoize when you have a measured performance problem.
2 / 5
"We moved the data-fetching to a React Server Component to avoid sending that library to the browser." Where do RSCs run, and what can they NOT do?
React Server Components (RSC) run exclusively on the server (Node.js / edge) or at build time — their output is serialised and streamed to the client. Because they never run in the browser, they cannot use useState, useEffect, event handlers (onClick), or any browser API. The payoff: zero JS bundle cost for the component, direct database/filesystem access, and no waterfall round-trips. Client-side interactivity lives in Client Components marked with "use client".
3 / 5
"Typing in the search box was janky because re-rendering the results list was blocking the input. We wrapped the results update in _____ so React could keep the input responsive and treat the list update as lower-priority."
startTransition(fn) (or the useTransition hook) marks state updates inside fn as non-urgent transitions. React can interrupt them to handle more urgent updates like user input, keeping the UI responsive. The hook also returns isPending — a boolean you can use to show a loading indicator. useDeferredValue is related: it defers re-rendering a specific value, but does not give you the isPending flag.
4 / 5
"The Suspense boundary shows the fallback spinner." What triggers the Suspense fallback?
Suspense works by catching a thrown Promise from a child component — a convention React calls "suspending." This happens when: (1) a lazy-loaded component (React.lazy) has not yet loaded, (2) a data library like Relay, SWR (with Suspense mode), or React's own use(promise) hook throws a Promise while waiting for data. React shows the fallback prop until all suspended children resolve. Error boundaries are separate — they catch thrown Errors, not Promises.
5 / 5
"We use SWR for client-side data fetching — it follows the stale-while-revalidate strategy." What does this mean in practice?
Stale-While-Revalidate (SWR) is an HTTP Cache-Control strategy popularised as a React data-fetching pattern by Vercel's SWR library and React Query (TanStack Query). The behaviour: on mount or focus, return cached data immediately (stale) for instant UX, then fetch fresh data in the background (revalidate) and update the UI when it arrives. This eliminates loading spinners on re-visits. Key SWR concepts: mutate() to trigger manual revalidation, revalidateOnFocus, and dedupingInterval to avoid duplicate requests.