Какие знаешь оптимизационные хуки?

Оптимизационные хуки в React

В React существует несколько встроенных хуков для оптимизации производительности компонентов. Они помогают избежать ненужных перерендеров, вычислений и пересоздания функций.

1. useMemo

Назначение: кэшировать результат дорогого вычисления между рендерами.

const memoizedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

Когда использовать:

• Сложные вычисления (сортировка больших массивов, математические операции)
• Вычисления, зависящие от пропсов или состояния
• Передача объектов как пропсов (чтобы не создавать новый объект каждый рендер)

// Плохо: newOptions создаётся каждый рендер
const newOptions = { label: item.name, value: item.id };

// Хорошо: newOptions кэшируется
const newOptions = useMemo(
  () => ({ label: item.name, value: item.id }),
  [item.name, item.id]
);

2. useCallback

Назначение: мемоизировать функцию, чтобы она не пересоздавалась при каждом рендере.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Зачем это нужно:

• Когда функция передаётся в useEffect как зависимость
• Когда функция передаётся компоненту с React.memo как проп
• Для оптимизации дочерних компонентов

3. React.memo

Назначение: предотвратить перерендер компонента, если пропсы не изменились.

const MyComponent = React.memo(({ name, age }) => {
  console.log("Рендер");
  return <div>{name} - {age}</div>;
});

React сравнивает старые и новые пропсы поверхностным сравнением. Если пропсы одинаковые - компонент не перерендеривается.

4. useDeferredValue

Назначение: отложить обновление части интерфейса для приоритизации срочных обновлений.

const deferredValue = useDeferredValue(value);

Пример с поиском - результаты обновляются с задержкой, но инпут остаётся отзывчивым.

5. useTransition

Назначение: пометить обновление как низкоприоритетное для неблокирующих обновлений.

const [isPending, startTransition] = useTransition();

const handleTabChange = (tab) => {
  startTransition(() => {
    setTab(tab);
  });
};

Сравнение

useMemo vs useCallback:

• useMemo кэширует значения, useCallback кэширует функции
• Оба помогают оптимизировать производительность
• React.memo часто используется вместе с useCallback

useDeferredValue vs useTransition:

• useDeferredValue: отложенное значение, не управление обновлением
• useTransition: управляет обновлением состояния и показывает статус загрузки

Важные предостережения

Не переоптимизируй!

• Используй эти хуки только когда действительно нужно
• Сначала обнови узкие места через DevTools профайлер
• Излишняя мемоизация может замедлить приложение

Лучшие практики

1. Профилируй перед оптимизацией - используй React DevTools Profiler
2. Используй зависимости правильно - неправильные зависимости приведут к багам
3. Комбинируй хуки - часто используются вместе для максимального эффекта
4. Помни про useEffect зависимости - используй useCallback для функций в зависимостях

Эти хуки критичны для создания высокопроизводительных React-приложений, особенно при работе с большими списками данных и сложной логикой.