Used to cache values or functions based on dependencies, preventing unnecessary recalculations or recreations on re-render.

useMemo()

Caches the return value of a computation.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• Recomputes only when a or b changes.
• Useful for heavy calculations, large list filtering, or any derived data.
• Returns a cached value.

Use when:

• The computation is expensive.
• The result is passed to memo() components or causes re-renders.

useCallback()

Caches the function reference, so it remains stable across renders.

const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

• Returns the same function reference unless dependencies change.
• Prevents child components from re-rendering due to new function identity.

Use when:

• Passing callbacks to memo() components.
• Avoiding unnecessary re-renders or effect re-triggers caused by unstable function references.