React Memoization

Comprehensive guide to performance optimization: when, why, and how to reuse computation results and references.

Introduction

Memoization is saving the result of a function execution to prevent re-computation given the same input parameters.

Goal: Maintain reference stability and cache heavy computations to minimize redundant re-renders.

useMemo

React Hook

Memoization of a computation result. Used for heavy calculations or creating stable object/array references.

useMemo.tsx

const value = useMemo(() => compute(a, b), [a, b]);

useCallback

React Hook

Memoization of a function reference. Essential when passing functions to memoized components or hook dependencies.

useCallback.tsx

const handler = useCallback(() => { ... }, [dep]);

React.memo

React Hook

Preventing redundant component re-renders. Wraps a component for shallow prop comparison.

memo.tsx

export const MyComp = memo(({ props }) => { ... });

Passing stable references (functions, objects) to child memo components.

Stabilizing dependencies for useEffect, useMemo, and other hooks.

Caching results of filtering, sorting, or complex data transformations.

Memoization is not free. It consumes additional memory and CPU resources for dependency comparison.

Memoization is an optimization, not a default practice. Measure first, optimize second.