useMemo, useCallback, useRef Interview Questions for React

useMemo, useCallback, useRef Interview Questions for React

useMemo, useCallback, and useRef come up in React interviews because they test optimization and mutable values. Here are the common questions.

What is the difference between useMemo and useCallback?

useMemo memoizes a value; useCallback memoizes a function reference. Use useMemo for expensive computations and useCallback for stable functions passed to memoized children.

What does useRef do and how is it different from useState?

useRef returns a mutable object that persists across renders without triggering re-renders. useState triggers a re-render when it changes. Use useRef for DOM references and mutable values that should not drive the UI.

When should you use useMemo?

For expensive computations that would otherwise run on every render, like sorting a large list. Also to keep an object reference stable for memoized children. Measure first, since memoization is not free.

When should you use useCallback?

When passing a function as a prop to a child wrapped in React.memo, so the child does not re-render just because the parent created a new function. Also for handlers used in child effects.

When does memoization hurt performance?

When used for cheap computations, without a memoized child, or as a default across the codebase. Memoization itself has overhead, so it should be used only where a real bottleneck is measured.

How to Answer Well

Connect the hooks to the problems they solve and acknowledge when not to use them. Interviewers value candidates who know when not to memoize as much as those who know how.

The Takeaway

Know useMemo vs useCallback, what useRef does and how it differs from useState, when to use each, and when memoization hurts. Connect hooks to the problems they solve and acknowledge when not to use them.