В чём разница между мемоизацией значений и мемоизацией функций?

Question

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

YeaHub · Accepted Answer

React опирается на ссылочную идентичность: если объект/функция новая по ссылке, это считается изменением. Отсюда появляются лишние ререндеры и лишние пересчёты.Мемоизация значений (useMemo)useMemo запоминает “значение”, обычно:результат вычисленияобъект/массив, который важно сохранить по ссылкеКогда полезно:Дорогие вычислениясортировкафильтрацияагрегацииСтабилизация propsчтобы React.memo у ребёнка сработалПример:const filtered = useMemo(() => {
  return items.filter(x => x.includes(query))
}, [items, query])
Мемоизация функций (useCallback)useCallback запоминает “ссылку на функцию”.Это важно, потому что:функция, объявленная в компоненте, создаётся заново на каждый рендересли её передать вниз как prop, React.memo увидит “props изменился”Пример:const onSelect = useCallback((id) => {
  setSelectedId(id)
}, [])
В чём ключевое различиеuseMemo возвращает значениеuseCallback возвращает функциюПри этом по смыслу useCallback(fn, deps) эквивалентен:useMemo(() => fn, deps)
Но useCallback читается проще, когда речь именно о функциях.Когда мемоизация не нужна (и может вредить)Мемоизация — это не бесплатная оптимизация.Проблемы:усложнение кодариск ошибок с зависимостяминакладные расходы на сравнение depsПоэтому применять стоит, когда есть понятная причина:компонент реально дорогойфункция/объект реально ломает мемоизацию детейвычисление реально тяжёлоеПрактическая связка с React.memoЕсли у вас есть ребёнок, обёрнутый в React.memo, и вы передаёте туда:объектмассивфункциюто без useMemo / useCallback часто получится, что ребёнок всё равно будет перерисовываться из-за новых ссылок.Краткий выводМемоизация значений снижает количество пересчётов и стабилизирует ссылки на данные, а мемоизация функций — стабилизирует ссылки на обработчики. Оба инструмента помогают React.memo и зависимости эффектов работать предсказуемо, но применять их нужно точечно.