React · Senior · Question 17 of 75

What does this hook do?

const useHandler = (f) => {
  const ref = useRef(f);
  ref.current = f;
  return useCallback((...args) => ref.current(...args), []);
};

✓Correct answer: Returns a stable function that always calls the latest version of f
2Memoizes the result of calling f, recomputing when arguments change
3Calls f once on mount and remembers its return value

Explanation

The callback reference is stable (handy for memo children and effect dependencies), but inside it always sees fresh props and state. Caveat: writing ref.current during render formally breaks render purity; React offers useEffectEvent for this task, and inside effects you'd update the ref in useLayoutEffect.

What does this hook do?

Explanation

Further reading

Problem with a question

Test yourself