React Memoization

Полноценное руководство по оптимизации производительности: когда, зачем и как переиспользовать результаты вычислений и ссылок.

Введение

Мемоизация — это сохранение результата выполнения функции для предотвращения повторных вычислений при тех же входных параметрах.

Цель: Сохранение ссылочной стабильности и кеширование тяжелых вычислений для минимизации лишних ререндеров.

useMemo

React Hook

Мемоизация результата вычислений. Используется для тяжелых вычислений или формирования стабильных ссылок на объекты/массивы.

useMemo.tsx

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

useCallback

React Hook

Мемоизация ссылки на функцию. Необходим при передаче функций в memo-компоненты или в зависимости других хуков.

useCallback.tsx

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

React.memo

React Hook

Предотвращение ререндеров компонента. Оборачивает компонент для поверхностного сравнения пропсов.

memo.tsx

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

Передача стабильных ссылок (функции, объекты) в дочерние memo-компоненты.

Стабилизация зависимостей для useEffect, useMemo и других хуков.

Кеширование результатов фильтрации, сортировки или сложных трансформаций данных.

Мемоизация — это не бесплатно. Она потребляет дополнительную память и ресурсы CPU на сравнение зависимостей.

Мемоизация — это оптимизация, а не дефолтная практика. Сначала измеряй, потом оптимизируй.

Классические сценарии

Передача стабильных ссылок (функции, объекты) в дочерние memo-компоненты.

Стабилизация зависимостей для useEffect, useMemo и других хуков.

Кеширование результатов фильтрации, сортировки или сложных трансформаций данных.