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

Question

useMemo мемоизирует вычисляемое значение.useCallback мемоизирует функцию.Оба хука зависят от массива зависимостей.Они используются для оптимизации перерендеров.

YeaHub · Accepted Answer

Оба хука решают похожую задачу, но применяются в разных ситуациях.ОпределениеuseMemo — мемоизирует результат вычисленияuseCallback — мемоизирует ссылку на функциюКак работает useMemoИспользуется для тяжёлых вычислений:const total = useMemo(() => {
  // сложное вычисление
  return price * count;
}, [price, count]);
Как работает useCallbackИспользуется для стабилизации функций:const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);
Почему это важноБез мемоизации:функции и объекты создаются зановоReact.memo не работаетрастёт число перерендеровРаспространённая ошибкаЧасто:используют хуки без необходимостиусложняют код без выигрыша в производительностиКраткий выводuseMemo применяют для значений, useCallback — для функций. Использовать их стоит только при реальной необходимости.