PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Какие Hooks позволяют оптимизировать React?

Хуки

Для оптимизации в React есть несколько хуков; каждый решает свою задачу, и все работают в связке с React.memo.

useMemo — кеш значений

const sorted = useMemo(() => [...rows].sort(byDate), [rows]);

Не пересчитывать дорогие вычисления на каждом рендере; давать стабильные ссылки на объекты/массивы для props memo-детей и зависимостей хуков.

useCallback — кеш функций

const handleSelect = useCallback((id) => select(id), []);

Стабильная ссылка на колбэк: memo-ребёнок не перерендерится, эффект с функцией в deps не перезапустится.

useTransition — приоритеты обновлений

const [isPending, startTransition] = useTransition();
startTransition(() => setFilter(value)); // несрочно: ввод не блокируется

useDeferredValue — «отстающее» значение

const deferredQuery = useDeferredValue(query); // тяжёлый список рендерится позже

Те же цели, что у useTransition, но со стороны значения.

useRef — обновление без рендера

Хранение изменяемых данных (таймеры, инстансы, предыдущие значения) вне цикла рендеринга.

useSyncExternalStore

Корректные точечные подписки на внешние сторы — рендерится только тот, чьи данные изменились (основа Zustand, react-redux).

Оговорка

useMemo/useCallback сами рендеры не пропускают — это делает React.memo; они лишь питают его стабильными props. Мемоизировать всё подряд вредно: сравнение стоит ресурсов. React Compiler (React 19) делает эту работу автоматически.

Коротко для собеседования

useMemo (дорогие вычисления и стабильные ссылки), useCallback (стабильные функции), useTransition/useDeferredValue (несрочные обновления — отзывчивый ввод), useRef (данные без ререндера), useSyncExternalStore (точечные подписки). Рендер пропускает React.memo — хуки лишь обеспечивают его стабильными props.

Другие вопросы раздела