useMemo vs useCallback?

Options

1. They are identical in behavior and purpose
2. useMemo memoizes a value; useCallback a function (Correct option)
3. useCallback memoizes values; useMemo functions
4. Both of them cache API responses between renders

Answer

useMemo memoizes a computed value; useCallback memoizes a function reference

Why

Every render re-runs your component function, recreating values and functions.

useMemo(() => expensiveCalc(data), [data]) keeps the RESULT until data changes.

useCallback(fn, [deps]) keeps the same FUNCTION object, so child components wrapped in React.memo don't re-render needlessly.

Use them where they help, not everywhere.

Remember

useMemo → value. useCallback → function.

Key terms

• React hook
• Memoization
• React
• Component
• State (UI)
• Props
• JavaScript