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

Основные варианты оптимизации React компонентов

Оптимизация компонентов - это критически важный навык для фронтенд-разработчика. Существует несколько проверенных подходов:

1. React.memo для предотвращения ненужных ре-рендеров

React.memo обёртывает компонент и пропускает ре-рендер, если props не изменились:

const UserCard = React.memo(({ user, onDelete }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={() => onDelete(user.id)}>Удалить</button>
    </div>
  );
});

Однако это не панацея - React.memo выполняет поверхностное сравнение props. Если передавать новый объект или функцию каждый раз, оптимизация не сработает.

2. useMemo для мемоизации вычислений

useMemo запоминает результат дорогостоящего вычисления и переиспользует его, пока зависимости не изменились:

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

Это полезно для сложных вычислений (фильтрация большого списка, сортировка, преобразования данных).

3. useCallback для стабильности функций

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

const handleDelete = useCallback((id) => {
  deleteUser(id);
}, [deleteUser]);

Без useCallback каждый ре-рендер создаёт новую функцию, что нарушает React.memo и заставляет дочерние компоненты ре-рендериться.

4. Code Splitting и динамический импорт

Разделение кода на части ускоряет начальную загрузку:

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false,
  loading: () => <div>Загрузка...</div>
});

5. Виртуализация длинных списков

Для списков с тысячами элементов использовать виртуализацию (react-window, react-virtualized):

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={35}
  width='100%'
>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</FixedSizeList>

6. Ленивая загрузка изображений

Использовать встроенный lazy loading или Intersection Observer API:

<img src='photo.jpg' loading='lazy' alt='Photo' />

7. Минимизация количества state

Чем больше state в компоненте, тем чаще он ре-рендится. Разделяй state логически и поднимай только необходимое.

Ключевой момент: не переоптимизируй раньше времени. Сначала измерь с помощью React DevTools Profiler, выяви узкие места, потом оптимизируй. Часто достаточно 2-3 стратегий.