React Hooks Advanced Patterns Practice Exam

Question 1 React Hooks Advanced Patterns

What is useActionState (React 19)?

function useWindowSize() {
  const [s, setS] = useState({w:innerWidth, h:innerHeight});
  useEffect(() => {
    const h = () => setS({w:innerWidth, h:innerHeight});
    addEventListener('resize', h);
    return () => removeEventListener('resize', h);
  }, []);
  return s;
}

Combines lazy init + effect to persist; handle JSON parse errors and SSR safety. Combine for showing previous data while loading new — UI stays responsive during refetch. Manages state tied to an action (form submission) and returns updated state.

Question 2 React Hooks Advanced Patterns

Force flush updates eagerly?

useEffectEvent (canary) — or roll your own with ref + useCallback. flushSync(() => setX(1)) — synchronous; bypasses batching. Use rarely. {count > 0 && <X/>} — `0 && ...` renders the 0. Coerce with !!count or compare explicitly. Effects run in declaration order on mount; cleanup runs in reverse order on unmount.

Question 3 React Hooks Advanced Patterns

Hook to read previous value?

function usePrev<T>(v: T) {
  const ref = useRef<T>();
  useEffect(() => { ref.current = v; });
  return ref.current;
}

const Input = forwardRef((p, ref) => {
  const inner = useRef();
  useImperativeHandle(ref, () => ({ focus: () => inner.current.focus() }));
  return <input ref={inner}/>;
});

const sorted = useMemo(() => data.sort(...), [data]); — recomputes only when data changes.

useEffect(() => {
  const sock = connect();
  return () => sock.close();
}, [url]);

Question 4 React Hooks Advanced Patterns

Hook returning event handlers with stable identity?

Combine useCallback + useRef pattern; or wait for useEffectEvent stabilization. Wraps action + initial state; returns [state, dispatchAction] — useful for form result with progressive enhancement. Reads a Promise or Context value — can be called conditionally in render; works with Suspense for async data. useReducer<Reducer<State, Action>>(reducer, initial)

Question 5 React Hooks Advanced Patterns

What is useId?

Create ref to mount node, useEffect to call createPortal on a child once ref is set. Debounced effect: useEffect on form state, setTimeout to save, cleanup to clear timeout — fires only after typing stops. Every consumer re-renders when context value changes. Split contexts by domain, memoize value, or use selector libraries (useContextSelector). Generates a unique, SSR-safe ID — for aria-* attributes pairing labels and inputs.

Question 6 React Hooks Advanced Patterns

Custom hook for fetch with retry?

Setting state of another component during render — defer to useEffect.

useEffect(() => {
  const sock = connect();
  return () => sock.close();
}, [url]);

Combine setTimeout backoff + AbortController + state machine (idle/loading/success/error/retry). if (x) useState(0); — different number of hook calls per render breaks reconciliation.

Question 7 React Hooks Advanced Patterns

useImperativeHandle anti-pattern?

When you need to read DOM measurements and apply changes synchronously before paint to avoid flicker. Exposing internal state to parent — usually means you should lift state instead. Controlled: value driven by state, onChange updates it.
Uncontrolled: DOM is source of truth; access via ref. Just function Input({ ref }) — function components accept ref directly.

Question 8 React Hooks Advanced Patterns

Pattern: useEffect with cleanup dep tracking?

useSyncExternalStore(s, () => navigator.onLine) with subscribe on online/offline events. const r = useRef(0); r.current++; — log each render to spot extra ones. If cleanup needs prev value, capture in ref before changing. flushSync(() => setX(1)) — synchronous; bypasses batching. Use rarely.

Question 9 React Hooks Advanced Patterns

When to use useTransition?

Runs synchronously before DOM mutations — used by CSS-in-JS libraries to inject styles. // eslint-disable-next-line react-hooks/exhaustive-deps with a comment explaining why. When a state update would block the UI (e.g., filtering a large list) — keeps current screen interactive. flushSync(() => setX(1)) — synchronous; bypasses batching. Use rarely.

Question 10 React Hooks Advanced Patterns

Effect that subscribes to a socket — pattern?

Make effects idempotent: check before subscribing, debounce expensive setup, use AbortController on fetches.

useEffect(() => {
  const sock = connect();
  return () => sock.close();
}, [url]);

const Input = forwardRef((p, ref) => {
  const inner = useRef();
  useImperativeHandle(ref, () => ({ focus: () => inner.current.focus() }));
  return <input ref={inner}/>;
});

Through the children prop (composition), not via direct import.

Question 11 React Hooks Advanced Patterns

Why Context can cause perf issues?

Create ref to mount node, useEffect to call createPortal on a child once ref is set. Every consumer re-renders when context value changes. Split contexts by domain, memoize value, or use selector libraries (useContextSelector). Use raf or lodash throttle around handler; cleanup ensures it stops on unmount. Returns the same function reference unless deps change — avoids re-rendering children that take it as a prop and use memo().

Question 12 React Hooks Advanced Patterns

Common mistake: using array index as key during reorder?

const ref = useRef(state);
useEffect(() => { ref.current = state; });
// use ref.current inside callbacks

Object literal is new identity each render → memo broken. Memoize the object with useMemo. No — convert to a hook (use- prefix) or refactor to plain JS that takes state as args. State binds to position, not item — wrong state persists when reorder happens.

Question 13 React Hooks Advanced Patterns

"Cannot update a component while rendering a different component" warning?

State that should persist across HMR — move to a store (Zustand, Redux) so it survives re-mounts. All consumers re-render on any change. Split contexts or use selector libraries. Setting state of another component during render — defer to useEffect. Hooks usually replace render props with cleaner code. Render props still useful when behavior needs to inject JSX (e.g., headless UI libs).

Question 14 React Hooks Advanced Patterns

Set state from inside effect of same state?

Appends <script> tag in useEffect; tracks loaded/error; cleans up on unmount or rerun. Fine if guarded by a condition that becomes false — otherwise infinite. Always have an exit condition. Effect adds keydown listener filtered by key + modifier; cleanup removes it; deps include handler dependencies via useCallback. Use useReducer when next state depends on previous state, when state shape is complex, or when actions describe intent better than setters.

Question 15 React Hooks Advanced Patterns

Form library you might pair with hooks?

React tracks calls by component instance; outside, no context — hook order can't be reconciled. const count = useStore(s => s.count); — re-renders only when slice changes. React Hook Form (uncontrolled by default + perf-friendly), Formik, or controlled patterns with useReducer. Generates a unique, SSR-safe ID — for aria-* attributes pairing labels and inputs.

Question 16 React Hooks Advanced Patterns

Pattern: combine Suspense with lazy?

Centralizes transitions, keeps actions explicit, easier to test in isolation.

function usePrev<T>(v: T) {
  const ref = useRef<T>();
  useEffect(() => { ref.current = v; });
  return ref.current;
}

useEffect with setInterval; document.visibilitychange listener clears/resumes interval.

const Profile = lazy(() => import('./Profile'));
<Suspense fallback={<Spinner/>}>
  <Profile/>
</Suspense>

Question 17 React Hooks Advanced Patterns

Use hooks in a non-component (utility)?

Dispatch is stable across renders, so consumers that only need to dispatch don't re-render on state changes. Always return a cleanup function from useEffect; if your hook subscribes/timers/listens, ensure cleanup, otherwise you'll leak memory and double-fire on remount. const useStore = create((set) => ({ count: 0, inc: () => set(s => ({count: s.count+1})) })); No — convert to a hook (use- prefix) or refactor to plain JS that takes state as args.

Question 18 React Hooks Advanced Patterns

useId in lists — caveat?

Exposing internal state to parent — usually means you should lift state instead. Memoize row component; pass stable callbacks via useCallback; key by stable id. useId generates ONE id per call site, not per item. Use useId once + suffix per item. Read query, push routes, listen to navigation events — pages/router only in app router context.

Question 19 React Hooks Advanced Patterns

Why useCallback alone doesn't prevent re-render?

function useIsMounted() {
  const ref = useRef(false);
  useEffect(() => { ref.current = true; return () => { ref.current = false; }; }, []);
  return ref.current;
}

Stable function isn't enough — receiving component must also be wrapped in React.memo or use the function in a useEffect dep. <form action={asyncFn}> — calls fn with FormData; pairs with useFormStatus inside child. 3rd arg is `getServerSnapshot` for hydration; required for SSR.

Question 20 React Hooks Advanced Patterns

What is `unstable_batchedUpdates`?

useState for last-copied + async navigator.clipboard.writeText — return [copy, copied]. Before each re-run (when user changes) and on unmount. Both global state libs; Recoil from FB (dormant); Zustand simpler API, very popular. Pre-18 API; React 18+ batches automatically across all sources.

Question 21 React Hooks Advanced Patterns

Pattern for form draft autosave?

Wraps action + initial state; returns [state, dispatchAction] — useful for form result with progressive enhancement. Runs after every render. Almost never what you want. Debounced effect: useEffect on form state, setTimeout to save, cleanup to clear timeout — fires only after typing stops. value={value ?? defaultValue} — falls back when uncontrolled.

Question 22 React Hooks Advanced Patterns

Stale closure example?

Updating state inside the effect with a dep that changes when state updates. Memoize the value or remove from deps if it doesn't need to trigger.

useEffect(() => {
  setInterval(() => console.log(count), 1000);
}, []); // always logs initial count

function useIsMounted() {
  const ref = useRef(false);
  useEffect(() => { ref.current = true; return () => { ref.current = false; }; }, []);
  return ref.current;
}

Memoize row component; pass stable callbacks via useCallback; key by stable id.

Question 23 React Hooks Advanced Patterns

Hook to detect online status?

Wrap in try/catch and retry with backoff; or use error boundary that triggers a re-render.

function mergeRefs(...refs){ return (node) => refs.forEach(r => { if(typeof r === 'function') r(node); else if(r) r.current = node; }); }

React tracks calls by component instance; outside, no context — hook order can't be reconciled. useSyncExternalStore(s, () => navigator.onLine) with subscribe on online/offline events.

Question 24 React Hooks Advanced Patterns

React Compiler vs manual useMemo?

If cleanup needs prev value, capture in ref before changing. const id = useRef(); useEffect(() => { id.current = setInterval(...); return () => clearInterval(id.current); }, []); Compiler auto-memoizes safe code; manual useMemo often becomes redundant. Profile to compare. Reads a Promise or Context value — can be called conditionally in render; works with Suspense for async data.

Question 25 React Hooks Advanced Patterns

useLayoutEffect when?

Must start with use — React linter and DevTools rely on this. useSyncExternalStore(s, () => navigator.onLine) with subscribe on online/offline events. When you need to read DOM measurements and apply changes synchronously before paint to avoid flicker. Pure renders only; don't mutate refs or external state in render. Side effects go in useEffect.

Question 26 React Hooks Advanced Patterns

Functional updater pattern?

useId generates ONE id per call site, not per item. Use useId once + suffix per item. setCount(c => c + 1) — avoids stale closure issues when multiple updates happen before re-render. Guard with typeof window !== 'undefined' or use lazy init in useEffect to run only after mount. useState(expensive()) runs every render. Use useState(() => expensive()) to defer.

Question 27 React Hooks Advanced Patterns

useSyncExternalStore signature?

Use raf or lodash throttle around handler; cleanup ensures it stops on unmount. useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) Throw inside action → caught by nearest error boundary (or returned via useActionState). Effects run after paint — suspense only catches sync render throws of promises. Use server components / data libs for suspense-aware data.

Question 28 React Hooks Advanced Patterns

Server Actions: how called?

DOM measurement + immediate style update; or to prevent flash of incorrect visual. react-hooks/exhaustive-deps — flags missing deps; respect it or document why intentionally omitted. Pass to action prop of form, or call directly from client; React handles RPC + revalidation. Action union type ensures payload matches type — full inference in reducer.

Question 29 React Hooks Advanced Patterns

useEffect double-fire mitigation in StrictMode?

useReducer<Reducer<State, Action>>(reducer, initial) const [v, setV] = useState(() => JSON.parse(localStorage.getItem(k) ?? 'null')); Make effects idempotent: check before subscribing, debounce expensive setup, use AbortController on fetches. if (x) useState(0); — different number of hook calls per render breaks reconciliation.

Question 30 React Hooks Advanced Patterns

Server Actions revalidate path?

import { revalidatePath } from 'next/cache'; revalidatePath('/items') inside action. useEffect(() => { const prev = document.title; document.title = t; return () => { document.title = prev; }; }, [t]); Records commits, shows render durations, why each rerendered — find expensive components and bad deps. Runs synchronously before DOM mutations — used by CSS-in-JS libraries to inject styles.

Question 31 React Hooks Advanced Patterns

useEffect for analytics on route change?

Older APIs (useEffect + setState) still work; new external stores should use it for concurrent safety. Marks a file as a Client Component — required to use hooks, event handlers, browser APIs. Effect on pathname dep, fires pageview each navigation; consider debouncing or single-instance ref. Reads a Promise or Context — works inside conditions/loops; Suspense surrounds for Promise reads.

Question 32 React Hooks Advanced Patterns

useImperativeHandle dep array?

useReducer<Reducer<State, Action>>(reducer, initial) Treats like useEffect — runs only when deps change.

useEffect(() => {
  setInterval(() => console.log(count), 1000);
}, []); // always logs initial count

Effect adds keydown listener filtered by key + modifier; cleanup removes it; deps include handler dependencies via useCallback.

Question 33 React Hooks Advanced Patterns

React Compiler (Forget) impact on memoization?

Fine if guarded by a condition that becomes false — otherwise infinite. Always have an exit condition. Automatically memoizes — manual useMemo/useCallback often unnecessary once the compiler is in use. Always return a cleanup function from useEffect; if your hook subscribes/timers/listens, ensure cleanup, otherwise you'll leak memory and double-fire on remount. react-hooks/exhaustive-deps — flags missing deps; respect it or document why intentionally omitted.

Question 34 React Hooks Advanced Patterns

What does useTransition return?

A tuple [isPending, startTransition] — wraps updates as low-priority to keep UI responsive. useId generates ONE id per call site, not per item. Use useId once + suffix per item. Runs once on mount, cleanup on unmount. React 18+ batches updates inside event handlers, promises, timeouts, and native events for fewer renders.

Question 35 React Hooks Advanced Patterns

Pattern for controlled + default value?

Always return a cleanup function from useEffect; if your hook subscribes/timers/listens, ensure cleanup, otherwise you'll leak memory and double-fire on remount. Display a chat message immediately while the POST is in flight; revert on error. Track an abort flag in the effect; check it before calling setState; cleanup sets the flag to true. value={value ?? defaultValue} — falls back when uncontrolled.

Question 36 React Hooks Advanced Patterns

forwardRef + useImperativeHandle pattern?

useEffect with setInterval; document.visibilitychange listener clears/resumes interval.

function useMediaQuery(q) {
  const [m, setM] = useState(() => matchMedia(q).matches);
  useEffect(() => {
    const mql = matchMedia(q);
    const fn = e => setM(e.matches);
    mql.addEventListener('change', fn);
    return () => mql.removeEventListener('change', fn);
  }, [q]);
  return m;
}

Server-rendered HTML differs from client first render. Avoid conditional UI based on browser-only data on initial render.

const Input = forwardRef((p, ref) => {
  const inner = useRef();
  useImperativeHandle(ref, () => ({ focus: () => inner.current.focus() }));
  return <input ref={inner}/>;
});

Question 37 React Hooks Advanced Patterns

What is useOptimistic?

Through the children prop (composition), not via direct import. React 19 hook for optimistic UI — shows a predicted state until the async action resolves. Appends <script> tag in useEffect; tracks loaded/error; cleans up on unmount or rerun. Always return a cleanup function from useEffect; if your hook subscribes/timers/listens, ensure cleanup, otherwise you'll leak memory and double-fire on remount.

Question 38 React Hooks Advanced Patterns

Why hooks fail outside components?

Yes — interval callback closes over initial state. Refresh via ref or recreate interval per state change. React tracks calls by component instance; outside, no context — hook order can't be reconciled. Add comment + lint disable; better is to extract the offending value into a useCallback or restructure.

const Profile = lazy(() => import('./Profile'));
<Suspense fallback={<Spinner/>}>
  <Profile/>
</Suspense>

Question 39 React Hooks Advanced Patterns

Cancel a hot reload reset of state — strategy?

Two effects in flight; the slower writes stale data. Track latest request id in ref, ignore older responses. Server-rendered HTML differs from client first render. Avoid conditional UI based on browser-only data on initial render. useEffectEvent (canary) — or roll your own with ref + useCallback. State that should persist across HMR — move to a store (Zustand, Redux) so it survives re-mounts.

Question 40 React Hooks Advanced Patterns

Hook for window size with throttle?

When the prop is the initial value only — use as useState(propInit) and ignore subsequent prop changes. Two effects in flight; the slower writes stale data. Track latest request id in ref, ignore older responses. Combines lazy init + effect to persist; handle JSON parse errors and SSR safety. Use raf or lodash throttle around handler; cleanup ensures it stops on unmount.

Question 41 React Hooks Advanced Patterns

Effect dep that should fire only on mount?

No — only when item renders are expensive and props are stable. Otherwise overhead beats savings. Effect must return cleanup or void; async returns a Promise. Define inner async function and call it. Empty deps [] — but rules of hooks lint may warn; add explanatory comment. A class component implementing componentDidCatch — wraps subtree to handle render errors gracefully.

Question 42 React Hooks Advanced Patterns

React 19 use server actions error handling?

IntersectionObserver in useEffect — observes ref, set state to load on intersect. useSelector reads, useDispatch writes; createSlice replaces boilerplate. setState locally, kick off mutation, on error revert state. Libraries (TanStack Query) provide onMutate / onError hooks. Throw inside action → caught by nearest error boundary (or returned via useActionState).

Question 43 React Hooks Advanced Patterns

Pattern: useEffect for keyboard shortcuts?

1) Call at the top level of a component or another hook — not inside loops/conditions.
2) Call from React functions only — components or other hooks. Through the children prop (composition), not via direct import. Stable function isn't enough — receiving component must also be wrapped in React.memo or use the function in a useEffect dep. Effect adds keydown listener filtered by key + modifier; cleanup removes it; deps include handler dependencies via useCallback.

Question 44 React Hooks Advanced Patterns

Should you wrap every list item in memo?

useEffect with setInterval; document.visibilitychange listener clears/resumes interval. No — only when item renders are expensive and props are stable. Otherwise overhead beats savings. Debounced effect: useEffect on form state, setTimeout to save, cleanup to clear timeout — fires only after typing stops. React 18+ batches updates inside event handlers, promises, timeouts, and native events for fewer renders.

Question 45 React Hooks Advanced Patterns

How to fetch data with cleanup against race conditions?

Track an abort flag in the effect; check it before calling setState; cleanup sets the flag to true.

const [data, setData] = useState();
const [err, setErr] = useState();
useEffect(() => {
  let off = false;
  fetch(url).then(r => r.json()).then(d => !off && setData(d), e => !off && setErr(e));
  return () => { off = true; };
}, [url]);

const m = useMutation({mutationFn, onSuccess: () => queryClient.invalidateQueries(['users'])}); IntersectionObserver in useEffect — observes ref, set state to load on intersect.

Question 46 React Hooks Advanced Patterns

useEffect dependency lint rule?

react-hooks/exhaustive-deps — flags missing deps; respect it or document why intentionally omitted. New function identity every render. Wrap with useCallback to stabilize. <form action={asyncFn}> — calls fn with FormData; pairs with useFormStatus inside child. Inside a , gives status of the parent form submission — pending, data, method, action.

Question 47 React Hooks Advanced Patterns

What is useDeferredValue?

const id = useRef(); useEffect(() => { id.current = setInterval(...); return () => clearInterval(id.current); }, []); React tracks calls by component instance; outside, no context — hook order can't be reconciled. React Hook Form (uncontrolled by default + perf-friendly), Formik, or controlled patterns with useReducer. Returns a deferred copy of a value; React updates it after urgent work completes — for derived state in expensive children.

Question 48 React Hooks Advanced Patterns

useEffect with no dep array?

useId generates ONE id per call site, not per item. Use useId once + suffix per item. const countAtom = atom(0); const [c, setC] = useAtom(countAtom); — primitive atoms compose into derived atoms. Runs after every render. Almost never what you want. StrictMode in dev — React mounts twice intentionally. Make sure cleanup is idempotent.

Question 49 React Hooks Advanced Patterns

useFormState (renamed useActionState in 19)?

useSelector reads, useDispatch writes; createSlice replaces boilerplate. Ref callbacks can return a cleanup function — runs on unmount or when ref changes. Wraps action + initial state; returns [state, dispatchAction] — useful for form result with progressive enhancement. const deferredQ = useDeferredValue(q); then filter big list using deferredQ — input stays responsive.

Question 50 React Hooks Advanced Patterns

useFormStatus only inside form?

Yes — must be a descendant of the form whose status you want. Otherwise returns defaults. Form children can read via useFormStatus (in-flight) and useActionState (result). useSelector reads, useDispatch writes; createSlice replaces boilerplate. IntersectionObserver in useEffect — observes ref, set state to load on intersect.