useMemo and useCallback

What is Memoization?

Memoization means remembering a calculated result or function reference so that it can be reused when appropriate.

useMemo

useMemo can cache the result of an expensive calculation between renders until its dependencies change.

useCallback

useCallback can keep a function reference stable between renders until its dependencies change. This can be useful when passing callbacks to memoized child components.

Important Performance Rule

Do not add useMemo or useCallback everywhere automatically. Memoization has a cost and can make code harder to understand. First identify a real performance problem, then optimize the measured bottleneck.