В чем разница между useMemo и useCallback?

Разница между useMemo и useCallback React-хуки для оптимизации производительности

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

Итог: useMemo оптимизирует значения, а useCallback — функции, обеспечивая стабильность ссылок в React.

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

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

useMemo и useCallback — React-хуки, предназначенные для оптимизации производительности с помощью мемоизации, однако задачи у них разные. useMemo сохраняет результат вычисления, то есть значение, а useCallback — саму функцию.

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

• useMemo получает функцию и массив зависимостей, после чего возвращает запомненное значение. Повторное вычисление происходит только при изменении зависимостей. Такой подход полезен для ресурсоемких расчетов и сложных объектов, позволяя избежать ненужных перерасчетов и ререндеров.
• useCallback также принимает функцию и зависимости, но возвращает мемоизированный callback — handler со стабильной ссылкой. Это особенно важно, когда функция передается дочернему компоненту, использующему сравнение пропсов, или применяется в useEffect.
• В React 18+ оба хука могут сократить число ненужных ререндеров. При этом чрезмерное применение мемоизации усложняет код и не во всех случаях дает заметный выигрыш в производительности.

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

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