Какие hook для оптимизации применяются на практике и какие задачи они решают?

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

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

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

Задачи: не повторять дорогие вычисления каждый рендер; давать стабильные ссылки объектам/массивам для props мемоизированных детей и зависимостей эффектов.

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

const handleRemove = useCallback((id) => remove(id), [remove]);

Задача: стабильная ссылка на колбэк, чтобы не ломать React.memo у детей и не перезапускать эффекты, где функция в зависимостях.

useTransition — несрочные обновления

const [isPending, startTransition] = useTransition();
startTransition(() => setFilter(input)); // тяжёлое обновление не блокирует ввод

Задача: пометить обновление как прерываемое — срочные (ввод, клики) обрабатываются первыми; isPending даёт индикатор.

useDeferredValue — отложенное значение

const deferredQuery = useDeferredValue(query);
const results = useMemo(() => search(deferredQuery), [deferredQuery]);

Задача: то же, что useTransition, но со стороны значения — тяжёлое поддерево рендерится с «отстающим» значением, пока пользователь печатает.

useId, useSyncExternalStore

Не про скорость, но рядом: useId — стабильные id без рассинхрона при SSR; useSyncExternalStore — корректные подписки на внешние сторы без лишних рендеров и tearing.

Связка с React.memo

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

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

Практический набор: useMemo (дорогие вычисления, стабильные ссылки), useCallback (стабильные колбэки для React.memo-детей и зависимостей), useTransition/useDeferredValue (несрочные обновления — отзывчивый ввод при тяжёлых перерисовках). Работают в связке с React.memo и применяются по результатам профилирования.