useMemo
Тема дорожной карты · React
useMemo — это React-хук, мемоизирующий результат ресурсоёмкого вычисления и пересчитывающий его только при изменении одной из перечисленных зависимостей, что предотвращает избыточные вычисления при перерендерах компонента. Хук принимает фабричную функцию и массив зависимостей: если зависимости не изменились с предыдущего рендера, React пропускает вызов фабрики и возвращает закешированное значение, улучшая производительность фронтенда для ресурсоёмких операций — фильтрации больших массивов данных, сложных математических преобразований или глубоко производных состояний. useMemo часто используется совместно с useCallback и React.memo для обеспечения референциальной стабильности значений и функций, передаваемых мемоизированным дочерним компонентам, — предотвращая ненужные перерендеры, вызванные изменениями идентичности объектов. В TypeScript useMemo автоматически выводит тип возврата из фабричной функции, но явный обобщённый тип useMemo<ExpensiveType>(factory, deps) улучшает ясность и гарантирует соблюдение TypeScript контракта возвращаемого типа. Как и все хуки оптимизации производительности React, useMemo следует применять на основе данных профилирования из React Profiler, а не умозрительно, поскольку сама мемоизация имеет небольшие накладные расходы, которые могут перевесить пользу для недорогих вычислений.
Как это работает
useMemo — обычные JavaScript-функции, чьё имя начинается с use. Они подчиняются тем же правилам, что и встроенные хуки (вызов на верхнем уровне, никогда внутри условий/циклов) и могут звать другие хуки. Они упаковывают переиспользуемую stateful-логику — useFetch(url), useDebounce(value, ms), useLocalStorage(key, init) — и возвращают значения, коллбэки или и то и другое. useMemo(compute, deps) и useCallback(fn, deps) кешируют значения/коллбэки между рендерами, чтобы избежать лишних пересчётов или ререндера детей.
Когда применять
Выносите кастомный хук, когда один и тот же танец useState+useEffect появляется в двух компонентах — особенно если есть setup + teardown. useMemo — только когда профайл показывает дорогой пересчёт (иначе оверхед учёта превышает экономию). useCallback — в основном для стабилизации идентичности коллбэка для мемоизированных детей; для хендлеров, не выходящих за компонент, обычные функции ок.
Типичные ошибки
Ловушки useMemo: вынос хука для короткого кода, исполняющегося раз (premature abstraction); функция со state, названная useX лишь по конвенции, но не следующая правилам хуков; useMemo/useCallback повсюду "для производительности" (каждый добавляет memory + comparison overhead); эффекты внутри условных веток кастомного хука (ломает порядок хуков). Профилируйте перед оптимизацией; пишите хук, когда есть 2+ места вызова.