Какие 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.