Explain the difference between React.memo and useMemo

WHAT THIS TESTS: This question checks if you know where memoization lives in the React tree. React.memo is a higher order component that lives outside the component it wraps. It memoizes the component itself by comparing previous and next props with Object.is. If they are the same React reuses the last rendered output and skips calling the component function. useMemo is a hook that lives inside a component. It memoizes a value returned from a function between renders of that component. It does not stop the component from rendering. It only avoids repeating an expensive calculation on every render when the dependency array has not changed.

A GOOD ANSWER COVERS: First define the scope difference. React.memo operates at the component boundary and is used when a parent re-renders but the child should not. useMemo operates inside a single component and is used when a computation is expensive and its inputs change rarely. Second mention the API shape. React.memo is called as React.memo(MyComponent) or exported as export default memo(MyComponent). useMemo is called inside the component body as const value = useMemo(() => compute(a, b), [a, b]). Third give a clear decision rule. Choose React.memo when you want to avoid rendering a child whose props are stable. Choose useMemo when you want to avoid redoing a heavy calculation or creating a new object reference that would break downstream memoization. Fourth note that React.memo compares props while useMemo compares dependencies.

COMMON WRONG ANSWERS: A red flag is claiming that useMemo prevents a component from re-rendering. It does not. It only caches the value returned by the function. Another red flag is saying React.memo caches the result of a calculation inside a component. It does not. It caches the rendered output of an entire component. Some candidates also say you can wrap a component definition with useMemo. That is incorrect because useMemo is a hook and cannot be used at module scope. Also avoid saying either is always needed. Modern React with the React Compiler can automatically memoize in many cases reducing manual useMemo needs.

LIKELY FOLLOW-UPS: The interviewer may ask how React.memo compares props. You should say shallow comparison by default or custom comparison function as a second argument. They may ask when useMemo is actually worth the cost. You should say when the calculation is measurably expensive usually more than a few milliseconds or when the returned object identity matters for a downstream useEffect or child memo. They may also ask about useCallback versus useMemo. You should explain that useCallback is a specialization of useMemo for functions.

ONE CONCRETE EXAMPLE: Imagine a chart dashboard. The parent component holds the selected date range and re-renders whenever the user clicks a preset. The heavy Chart component receives data and color props. If the data and color props are unchanged you wrap Chart in React.memo so the parent re-render does not force Chart to re-render. Inside Chart you transform ten thousand raw data points into a mapped SVG path array. You wrap that mapping in useMemo with the raw data as a dependency so the path array is only rebuilt when the data changes not on every parent re-render.

Source: react.dev