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

Оба хука решают похожую задачу, но применяются в разных ситуациях.

Определение

• useMemo — мемоизирует результат вычисления

• useCallback — мемоизирует ссылку на функцию

Как работает useMemo

Используется для тяжёлых вычислений:

const total = useMemo(() => {
  // сложное вычисление
  return price * count;
}, [price, count]);

Как работает useCallback

Используется для стабилизации функций:

const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);

Почему это важно

Без мемоизации:

• функции и объекты создаются заново

• React.memo не работает

• растёт число перерендеров

Распространённая ошибка

Часто:

• используют хуки без необходимости

• усложняют код без выигрыша в производительности

Краткий вывод

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