Advanced Hook Patterns

Preview — 3 of 10 questions

When and how do you use useImperativeHandle?

javascript

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ""; },
  }));

  return <input ref={inputRef} {...props} />;
});

// Parent:
const ref = useRef();
// ref.current.focus() — calls the custom focus
// ref.current.clear() — works!
// ref.current.value  — ❌ not exposed!

AuseImperativeHandle is only used with class components

BThe parent gets access to the entire <input> DOM element

CuseImperativeHandle replaces forwardRef — you don't need both

DuseImperativeHandle customizes what a parent receives via ref — it exposes a controlled API instead of the full DOM node, limiting accidental DOM manipulation

What does useDeferredValue do?

javascript

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => filterResults(deferredQuery), [deferredQuery]);

  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      {results.map(r => <Result key={r.id} result={r} />)}
    </div>
  );
}

AuseDeferredValue delays the value by exactly 250ms

BuseDeferredValue is the same as startTransition

CuseDeferredValue returns a deferred copy of the value — during urgent renders, the deferred value lags behind; React renders with the old value first (keeping UI responsive) then updates when idle

DuseDeferredValue only works with string values

When should you use useId?

javascript

function EmailField() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>Email:</label>
      <input id={id} type="email" />
    </>
  );
}

AuseId generates a random ID on every render

BuseId requires a seed argument to be unique

CuseId is only needed for accessibility, not general use

DuseId generates a stable, unique ID per component instance — consistent between server and client (no hydration mismatch); safe to use with SSR; avoid using as list key

Answer all 10 questions (7 more), see explanations for every answer, and track your score.