React Hooks + Async Correctness

Question 1

Deck 2 - React Hooks: Async Correctness (objective)

Answer 1

Goal: spot deps/stale-closure/race/cleanup issues fast.
What you practice: 1 verdict sentence + 2-3 major issues + fix approach.

Question 2

Define dependency array (deps).

Answer 2

• Controls when an effect re-runs.
• Missing deps => stale closure.
• Too many deps => extra work or loops.
• Rule: include every render-scope value you read (or stabilize intentionally).

Question 3

Define stale closure.

Answer 3

• A callback/effect reads values captured from an earlier render.
• Usually from missing deps or incorrect memoization.
• Fix: correct deps, functional updates, or a ref for latest value.

Question 4

Define race condition in async effects.

Answer 4

• Overlapping requests resolve out of order.
• Older response can overwrite newer state.
• Fix: AbortController or request-id guard (ignore stale results).

Question 5

Define cleanup function (effect).

Answer 5

• Runs on unmount and before next effect run.
• Use it to abort fetches, clear timers, unsubscribe listeners.

Question 6

Why should useEffect callback not be async?

Answer 6

• Effect callback must return void or cleanup, not a Promise.
• Pattern: define an inner async function and call it.

Question 7

Define setState-after-unmount.

Answer 7

• Async work completes after unmount and calls setState.
• Causes warnings/leaks.
• Fix: cleanup/cancel or ignore stale results.
• “setState-after-unmount” is when a component tries to update its state after it has already been removed from the UI (unmounted). It usually happens when an async task (fetch, timer, subscription) finishes later and calls a state setter (setState) on a component that no longer exists.
• causes reliability bugs, memory leak patterns, and is a symptom of missing cleanup/cancellation.
• Common Causes: fetch() resolves after navigation away. setTimeout fires after unmount. Event/subscription continues after unmount.

Example code (Bad -> fixed):

function Profile({ id }: { id: string }) {
  const [user, setUser] = React.useState<{ name: string } | null>(null);

  React.useEffect(() => {
    fetch(`/api/user?id=${encodeURIComponent(id)}`)
      .then((r) => r.json())
      .then((data) => setUser(data)); // <- can run after unmount
  }, [id]);

  return <div>{user ? user.name : "Loading..."}</div>;
}

Fixed (cancel in-flight request on unmount / id change):

function Profile({ id }: { id: string }) {
  const [user, setUser] = React.useState<{ name: string } | null>(null);

  React.useEffect(() => {
    const controller = new AbortController();

    (async () => {
      const res = await fetch(`/api/user?id=${encodeURIComponent(id)}`, {
        signal: controller.signal,
      });
      if (!res.ok) return;
      const data = await res.json();
      setUser(data);
    })().catch((e) => {
      if (e?.name === "AbortError") return; // ignore cancellation
    });

    return () => controller.abort(); // <- prevents setState-after-unmount
  }, [id]);

  return <div>{user ? user.name : "Loading..."}</div>;
}

Question 8

Define functional update.

Answer 8

• Use setX(prev => next) when next depends on prev.
• Prevents stale updates after awaits / batching.

Question 9

StrictMode note (dev).

Answer 9

• In dev StrictMode, effects may run more than once.
• Code must be idempotent with correct cleanup and no duplicated subscriptions.

Question 10

When should you reset state on input change?

Answer 10

• When old data would mislead while new request is pending.
• Typical: setData(null) and show Loading.

Question 11

Minimum safe fetch handling.

Answer 11

• Encode params.
• Check res.ok.
• Parse JSON.
• Validate shape.
• Set data or error state.

Question 12

Treat res.json() as what type by default?

Answer 12

• unknown.
• Validate required fields before use to prevent runtime crashes.

Question 13

Define “Dependency Loop” in React Effects:

• What is the technical cause, the immediate symptom, and the architectural fix?

Answer 13

• Cause: useEffect updates a value that is also in its dependency array.
• Symptom: Infinite re-render loop (App crash/freeze).
• The Fixes:
  
  • Functional Updates: setCount(c => c + 1) (removes dependency).
  • Primitive Deps: Depend on id, not the object.
• De-sync: Move logic to an Event Handler (e.g., onClick).

THE LONG (FULL) ANSWER

• The Technical Cause: A useEffect performs an action that updates a dependency listed in its own dependency array.
  
  • Example: useEffect(() => { setCount(count + 1) }, [count])
• The Symptom: An Infinite Re-render Cycle. The effect triggers a state update → React re-renders the component → The dependency changed → The effect runs again.
• The “Evaluator” Insight (The Smells):
  
  • Direct Loops: Setting state that is directly in the array.
  • Indirect Loops: Effect updates A -> B is a memoized value based on A -> Effect depends on B.
  • Object/Function Identity: Effect depends on an object/function defined in the component body that isn’t memoized. Every render creates a “new” version, re-triggering the effect.
• The Fixes:
  
  • Functional Updates: Use setCount(c => c + 1) and remove count from the dependency array.
  • Move Logic: Move the logic into an event handler (e.g., onClick) instead of a “syncing” effect.
  • Primitive Dependencies: Depend on id (string) instead of user (object).

Question 14

Define referential instability.

Answer 14

• Objects/functions created in render have new identity each render.
• If used in deps, effect re-runs.
• Fix: depend on primitives or memoize with correct deps.

Question 15

Define AbortController usage (review-level).

Answer 15

• Create controller inside effect (per run).
• Pass signal to fetch.
• Abort in cleanup.
• Ignore AbortError.

Question 16

Define request-id guard (review-level).

Answer 16

• Increment token per request.
• Only commit result if token matches latest.
• Works for any async (not just fetch).

Question 17

Define debounce + cleanup.

Answer 17

• Delay work to reduce request spam.
• Must clearTimeout in cleanup.
• Still needs cancellation/race protection for the request.

Question 18

Define TOCTOU bug (async UI).

Answer 18

• You validate inputs, start async work, then apply result later.
• Inputs may have changed.
• Fix: cancel/ignore stale work.

Question 19

Evaluator phrasing pattern (1 sentence).

Answer 19

Name issue -> impact -> fix pattern.
Example: “FAIL - Missing cancellation allows out-of-order fetches to overwrite newer state (race condition); add AbortController or request-id guard.”

Question 20

Top 3 async-effect risks to look for first.

Answer 20

1) deps correctness
2) cancellation / ignore-stale
3) error handling (res.ok + catch)

Question 21

Gotcha: missing deps causes stale id.

useEffect(() => {
  fetch(`/api/users/${id}`).then(r => r.json()).then(setUser);
}, []);

Answer 21

Verdict: FAIL
- Issue: effect reads id but deps are [].
- Impact: stale user when id changes.
- Fix: include [id] and add race protection.

Question 22

Gotcha: race condition on id changes.

useEffect(() => {
  fetch(`/api/users/${id}`).then(r => r.json()).then(setUser);
}, [id]);

Answer 22

Verdict: FAIL
- Issue: no cancellation/ignore-stale.
- Impact: older response can overwrite newer.
- Fix: AbortController or request-id guard.

Question 23

Gotcha: no res.ok handling.

const res = await fetch(url);
const data = await res.json();
setData(data);

Answer 23

Verdict: FAIL
- Issue: missing res.ok check.
- Impact: 404/500 treated as success.
- Fix: if (!res.ok) throw/map to error state.

Question 24

Gotcha: async effect callback.

useEffect(async () => {
  const res = await fetch(url);
  setData(await res.json());
}, [url]);

Answer 24

Verdict: FAIL
- Issue: effect callback returns Promise.
- Fix: inner async function; keep cleanup available.

Question 25

Gotcha: loading set before guard. ``` useEffect(() => { setLoading(true); if (!query) return; fetch(`/api?q=${query}`); }, [query]); ```

Answer 25

Verdict: FAIL - Issue: loading can get stuck when query is falsy. - Fix: guard first, then setLoading and fetch.

Question 26

Gotcha: loading never cleared. ``` useEffect(() => { setLoading(true); fetch(url).then(r => r.json()).then(setData); }, [url]); ```

Answer 26

Verdict: FAIL - Issue: no catch/finally. - Impact: loading may stay true. - Fix: catch/finally (or try/catch/finally) to clear loading.

Question 27

Gotcha: debounce missing cleanup. ``` useEffect(() => { const t = setTimeout(() => fetch(url), 300); }, [url]); ```

Answer 27

Verdict: FAIL - Issue: clearTimeout missing. - Fix: return () => clearTimeout(t).

Question 28

Gotcha: timer missing cleanup. ``` useEffect(() => { setTimeout(() => setReady(true), 500); }, []); ```

Answer 28

Verdict: FAIL - Issue: timeout not cleared. - Impact: setState after unmount. - Fix: clearTimeout in cleanup.

Question 29

Gotcha: listener missing cleanup. ``` useEffect(() => { window.addEventListener('resize', onResize); }, []); ```

Answer 29

Verdict: FAIL - Issue: removeEventListener missing. - Impact: leak/duplicate handlers. - Fix: return cleanup to remove listener.

Question 30

Gotcha: stale state after await. ``` const onClick = async () => { await api.save(); setCount(count + 1); }; ```

Answer 30

Verdict: FAIL - Issue: count may be stale after await. - Fix: setCount(prev => prev + 1).

Question 31

Gotcha: dependency loop includes state set by effect. ``` useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url, data]); ```

Answer 31

Verdict: FAIL - Issue: data in deps triggers repeated fetch. - Fix: depend on url only.

Question 32

Gotcha: object dep identity changes. ``` const params = { q: query }; useEffect(() => { fetch(`/api/search?q=${params.q}`); }, [params]); ```

Answer 32

Verdict: FAIL - Issue: params is new each render. - Fix: depend on query (or memoize params).

Question 33

Gotcha: missing encodeURIComponent. ``` fetch(`/api/search?q=${query}`); ```

Answer 33

Verdict: FAIL - Issue: query not encoded. - Fix: encodeURIComponent(query).

Question 34

Gotcha: unknown response shape used directly. ``` const data = await res.json(); setName(data.name.toUpperCase()); ```

Answer 34

Verdict: FAIL - Issue: assumes data.name is string. - Fix: validate shape before using.

Question 35

Gotcha: AbortError shown to user. ``` catch (e) { setError(String(e)); } ```

Answer 35

Verdict: FAIL - Issue: AbortError is expected. - Fix: ignore AbortError; surface real failures only.

Question 36

Gotcha: stale finally clobbers loading. ``` useEffect(() => { setLoading(true); fetch(url) .then(r => r.json()) .then(setData) .finally(() => setLoading(false)); }, [url]); ```

Answer 36

Verdict: FAIL - Issue: older request can setLoading(false) during newer. - Fix: cancel/ignore stale (AbortController or request-id).

Question 37

Gotcha: returning null hides loading/empty/error. ``` if (!data) return null; ```

Answer 37

Verdict: FAIL - Issue: ambiguous UI state. - Fix: explicit idle/loading/error/empty/success states.

Question 38

Gotcha: helper closes over changing input. ``` async function load() { const r = await fetch(`/api?q=${query}`); return r.json(); } useEffect(() => { load().then(setData); }, [query]); ```

Answer 38

Verdict: FAIL - Issue: helper reads query from closure. - Fix: pass query as arg or define helper inside effect.

Question 39

Gotcha: subscription missing cleanup. ``` useEffect(() => { api.subscribe(cb); }, []); ```

Answer 39

Verdict: FAIL - Issue: unsubscribe missing. - Fix: return cleanup to unsubscribe.

Question 40

Gotcha: suppressing exhaustive-deps. ``` useEffect(() => { doThing(value); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); ```

Answer 40

Verdict: FAIL - Issue: hides stale-closure bugs. - Fix: refactor so deps are correct; avoid suppression.

Question 41

Gotcha: interval stale closure. ``` const [n, setN] = useState(0); useEffect(() => { const t = setInterval(() => setN(n + 1), 1000); return () => clearInterval(t); }, []); ```

Answer 41

Verdict: FAIL - Issue: interval captures stale n. - Fix: setN(prev => prev + 1).

Question 42

Gotcha: unstable function dep. ``` function Parent({ id }) { const load = () => fetch(`/api/${id}`); useEffect(() => { load(); }, [load]); } ```

Answer 42

Verdict: FAIL - Issue: load changes each render. - Fix: inline in effect or useCallback([id]).

Question 43

Gotcha: open missing from deps. ``` useEffect(() => { if (!open) return; fetch(url).then(r => r.json()).then(setData); }, [url]); ```

Answer 43

Verdict: FAIL - Issue: open missing from deps. - Fix: include open or restructure.

Question 44

Gotcha: controller created outside effect. ``` const controller = new AbortController(); useEffect(() => { fetch(url, { signal: controller.signal }); return () => controller.abort(); }, [url]); ```

Answer 44

Verdict: FAIL - Issue: controller reused across runs. - Fix: create controller inside effect per run.

Question 45

Gotcha: setData receives Response. ``` fetch(url).then(setData); ```

Answer 45

Verdict: FAIL - Issue: setData gets Response, not parsed JSON. - Fix: parse json and validate.

Question 46

Gotcha: unhandled rejection. ``` fetch(url) .then(r => { if (!r.ok) throw new Error('bad'); return r.json(); }) .then(setData); ```

Answer 46

Verdict: FAIL - Issue: thrown error not caught. - Fix: add catch + error state.

Question 47

Gotcha: error not reset on retry. ``` useEffect(() => { fetch(url).catch(() => setError('failed')); }, [url]); ```

Answer 47

Verdict: FAIL - Issue: error never cleared at request start. - Fix: setError(null) before starting request.

Question 48

Gotcha: JSON.stringify in deps. ``` useEffect(() => { fetch('/api', { body: JSON.stringify(filters) }); }, [JSON.stringify(filters)]); ```

Answer 48

Verdict: FAIL - Issue: fragile deps + noisy reruns. - Fix: memoize filters or depend on stable primitives.

Question 49

Gotcha: derived state drift (missing items dep). ``` useEffect(() => { setFiltered(items.filter(i => i.includes(query))); }, [query]); ```

Answer 49

Verdict: FAIL - Issue: items missing from deps. - Fix: include items or derive in render.

Question 50

Gotcha: appends results across queries unintentionally. ``` useEffect(() => { fetch(url).then(r => r.json()).then(d => setItems(prev => [...prev, ...d.items])); }, [query]); ```

Answer 50

Verdict: FAIL - Issue: mixes results. - Fix: reset items when query changes (unless intentional).

Question 51

Gotcha: key driver dep missing (url built from query). ``` const url = `/api?q=${encodeURIComponent(query)}`; useEffect(() => { fetch(url); }, []); ```

Answer 51

Verdict: FAIL - Issue: url/query missing from deps. - Fix: include [url] (or [query]).

Question 52

Gotcha: returning early without clearing loading. ``` useEffect(() => { setLoading(true); if (disabled) return; fetch(url).then(...).finally(() => setLoading(false)); }, [url, disabled]); ```

Answer 52

Verdict: FAIL - Issue: early return can leave loading stuck. - Fix: guard first or clear loading before return.

Question 53

Gotcha: predicate missing from deps. ``` useEffect(() => { setFiltered(items.filter(predicate)); }, [items]); ```

Answer 53

Verdict: FAIL - Issue: predicate missing from deps. - Fix: include predicate or derive in render.

Question 54

Gotcha: cleanup removes wrong handler if handler changes. ``` useEffect(() => { window.addEventListener('scroll', handler); return () => window.removeEventListener('scroll', handler); }, []); ```

Answer 54

Verdict: FAIL - Issue: if handler changes, cleanup is wrong. - Fix: stabilize handler or include it in deps.

Question 55

Gotcha: optimistic update without rollback. ``` setItems(prev => [...prev, item]); await api.create(item); ```

Answer 55

Verdict: PARTIAL FAIL - Issue: no rollback/error handling. - Fix: rollback on failure or refetch.

Question 56

Gotcha: conflates states. ``` if (!data) return

; ```

Answer 56

Verdict: FAIL - Issue: no distinct loading/empty/error. - Fix: explicit states.

Question 57

Gotcha: effect depends on props object. ``` useEffect(() => { doThing(props.value); }, [props]); ```

Answer 57

Verdict: FAIL - Issue: over-broad deps causes reruns. - Fix: depend on props.value.

Question 58

Gotcha: missing clearInterval. ``` useEffect(() => { const t = setInterval(tick, 1000); }, []); ```

Answer 58

Verdict: FAIL - Issue: no clearInterval. - Fix: return () => clearInterval(t).

Question 59

Gotcha: stale closure in subscription handler. ``` const onMessage = (m) => setMsgs([...msgs, m]); useEffect(() => { sub(onMessage); return () => unsub(onMessage); }, [onMessage]); ```

Answer 59

Verdict: FAIL - Issue: stale msgs + unstable handler. - Fix: setMsgs(prev => [...prev, m]) + stabilize handler.

Question 60

Gotcha: missing validation for array. ``` const data = await res.json(); setResults(data.items.map(String)); ```

Answer 60

Verdict: FAIL - Issue: assumes items is array. - Fix: Array.isArray(data.items) check + error state.

Question 61

Scenario: verdict + top 3 issues. ``` function Profile({ id }) { const [user, setUser] = useState(null); useEffect(() => { fetch(`/api/users/${id}`).then(r => r.json()).then(setUser); }, [id]); return

{user.name}

; } ```

Answer 61

Verdict: FAIL 1) Race protection missing (older fetch can overwrite newer) 2) Null safety missing (user can be null; user.name can throw) 3) No res.ok/error state

Question 62

Scenario: one-sentence verdict (deps).

Answer 62

FAIL - The effect reads a render-scope value but omits it from deps, causing stale behavior when it changes.

Question 63

Scenario: one-sentence verdict (race).

Answer 63

FAIL - The effect does not cancel or ignore in-flight requests, so older results can overwrite newer state (race condition).

Question 64

Scenario: primary category for missing cleanup.

Answer 64

Primary: Reliability Reason: missing cleanup can trigger updates after unmount or duplicated subscriptions.

Question 65

Scenario: fix approach (no code). ``` useEffect(() => { setLoading(true); fetch(url).then(r => r.json()).then(setData); }, [url]); ```

Answer 65

- Add res.ok + catch/finally to clear loading - Add cancellation/request-id to prevent stale overwrite - Reset state at request start if stale UI is misleading

Question 66

Scenario: user types fast into search (what breaks first?).

Answer 66

- Overlapping requests create race condition - Without debounce/cancel, older results can overwrite - Fix: debounce + AbortController/request-id + error handling

Question 67

Scenario: effect uses object dep (why is it wrong?).

Answer 67

Because object identity changes each render, effect re-runs unnecessarily; depend on primitives or memoize object.

Question 68

Scenario: when is AbortError ignored?

Answer 68

When request is intentionally cancelled on cleanup (unmount/input change). Do not show AbortError to user.

Question 69

Scenario: what is the best fix for stale state after await?

Answer 69

Use functional update: setX(prev => prev + 1) (or compute from prev).

Question 70

Scenario: how do you justify avoiding eslint-disable exhaustive-deps?

Answer 70

Usually you should not. Refactor so deps are correct. Suppress only with strong, documented justification.

Question 71

Scenario: out-of-order requests + loading state (risk).

Answer 71

Old request's finally can setLoading(false) during a newer request; fix with cancel/ignore-stale or request-id.

Question 72

Scenario: why validate JSON as unknown?

Answer 72

Because runtime data can be malformed; validation prevents crashes and makes failures explicit via error state.

Question 73

Scenario: when can you derive data in render instead of state + effect?

Answer 73

When it's purely derived from props/state and doesn't require side effects; avoids deps bugs entirely.

Question 74

Scenario: what does "driver input" mean for deps?

Answer 74

The minimal input(s) that determine the effect's purpose (e.g., id/query/url); depend on drivers, not state set by effect.

Question 75

Scenario: should you reset error state on retry?

Answer 75

Yes. Clear error at request start so new attempt is not blocked by stale error UI.

Question 76

Checklist: top 5 async-effect review points.

Answer 76

1) deps correctness 2) cancellation/ignore-stale 3) res.ok + error handling 4) runtime validation 5) explicit UI states

Question 77

Checklist: dependency reasoning steps.

Answer 77

- Identify driver inputs - List values read from render scope - Include in deps or stabilize - Check for loops - Check for staleness

Question 78

Checklist: minimum fetch hardening.

Answer 78

- encode params - res.ok - parse JSON - validate shape - error state

Question 79

Checklist: cleanup triggers to look for.

Answer 79

- Abort fetch - clearTimeout/clearInterval - removeEventListener - unsubscribe external sources - ignore stale async results

Question 80

Checklist: evaluator wording pattern.

Answer 80

Name issue (stale closure/race/missing cleanup) -> impact (stale UI/wrong data/leak) -> fix (deps + abort/request-id + explicit states).