Зачем нужны useMemo и useCallback и как работает мемоизация?

Зачем нужны useMemo и useCallback и как работает мемоизация? React hooks для оптимизации производительности

• useMemo сохраняет результат функции
• useCallback сохраняет саму функцию (callback)
• Оба хука помогают избежать ненужных вычислений и повторного рендера компонентов
• Мемоизация возвращает сохранённое значение, пока зависимости остаются неизменными
• Для обновления результата используется проверка массива зависимостей (deps array)
• В React это уменьшает число рендеров и тяжёлых вычислений
• Хуки полезны при передаче props и работе с контекстом, когда важно избежать лишних ререндеров

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

Подробный ответ

Основной ответ

useMemo и useCallback — React hooks для оптимизации производительности компонентов. Они мемоизируют вычисления и функции, помогая сократить лишние пересчёты и ререндеры. useMemo сохраняет результат вычисления, тогда как useCallback удерживает неизменной ссылку на саму функцию между рендерами.

Мемоизация сохраняет уже полученный результат и использует его повторно, если входные данные не менялись. В React этот механизм помогает не обновлять компоненты без необходимости и не запускать повторно дорогие вычисления.

Ключевые моменты

• useMemo вычисляет и кеширует значение: хук получает функцию и массив зависимостей; значение пересчитывается только после изменения зависимости, в остальных случаях возвращается кэшированный результат.
• useCallback мемоизирует функцию: он полезен, когда дочерним компонентам передают callback со стабильной ссылкой. Особенно заметен эффект вместе с React.memo, поскольку это помогает сократить повторные рендеры.
• Мемоизация снижает нагрузку: уменьшение числа вычислений и рендеров повышает производительность при сложной логике или глубокой иерархии компонентов.

Практический контекст

Обычно useMemo применяют для дорогих операций, например фильтрации большого списка, а useCallback — для передачи обработчиков событий дочерним компонентам. В React 18 и более новых версиях эти хуки особенно полезны при оптимизации в новых Concurrent-режимах и сценариях с высокой нагрузкой.