Effects & Lifecycle — Chapter Quiz

Question 1

1

When does useEffect(fn, []) run?

AOnce after mountBOn every renderCNeverDOnly when props change

Empty array = no deps = run once after mount. In dev with StrictMode it actually fires twice — to surface missing cleanups.

Question 2

2

An effect's cleanup function runs before the effect runs again, and on unmount.

TTrueFFalse

Each cleanup is paired with the run it cleaned up. React calls it before re-running with new deps, and on unmount.

Question 3

3

An effect uses id and query. What goes in the dep array?

A[]B[id]C[id, query]DOmit the array

Every reactive value the effect reads should be in deps. The react-hooks/exhaustive-deps lint rule enforces this.

Question 4

4

Which is the right way to fetch when an id prop changes?

AIn the render bodyBIn useEffect with [id] as depsCIn useEffect with no depsDIn an event handler that fires on render

Effects are the place for fetches. Listing id in deps makes the effect re-run when id changes — re-fetching automatically.

Question 5

5

An effect that needs no cleanup can omit the return.

TTrueFFalse

useEffect accepts undefined as the return. Only return a cleanup if there's something to undo.

Question 6

6

A user types fast in a search box. The fetch for an old query resolves AFTER a newer one. What pattern guards against showing stale results?

AA cancelled flag in the effect's closureBuseMemo for the queryCSetting state inside the render bodyDUsing useCallback on the fetcher

Set let cancelled = false in the effect, check it before setState, and flip it in the cleanup. Even better — combine with AbortController to cancel the request itself.

Question 7

7

When should you NOT use useEffect?

AFor computing derived values from props/stateBFor copying one state into anotherCFor things that should happen on a user clickDAll of the above

All three are anti-patterns. Effects are for syncing with the outside world, not for in-React data flow or user actions.

Question 8

8

To get a reference to a DOM element from a component, use _______(null) and the JSX ref prop.

useRef(null) creates a { current: null } box. React fills in .current with the DOM node after mount.

Test what you learned.