Как оптимизировать компонент, из-за которого страница подвешивается при загрузке большого объёма данных?

Проблема и её причины

Когда React-компонент обрабатывает и рендерит большой объём данных (например, список из тысяч элементов), браузер может зависнуть из-за блокировки основного потока. Это происходит, потому что React синхронно выполняет рендеринг, а браузер не может обновлять интерфейс до завершения работы JavaScript.

Основные подходы к оптимизации

• Виртуализация списка — рендерит только видимые элементы, используя библиотеки вроде react-window или react-virtualized.
• Ленивая загрузка — разбивает код на чанки с помощью React.lazy и Suspense.
• Мемоизация — предотвращает повторные вычисления с помощью React.memo, useMemo и useCallback.
• Пагинация — загружает данные порциями по запросу пользователя.
• Разбиение рендеринга — использует requestAnimationFrame или setTimeout для распределения работы по кадрам.

Пример с виртуализацией

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Элемент {index}</div>
);

const BigList = ({ items }) => (
  <List
    height={400}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

Пример с мемоизацией

const ExpensiveComponent = React.memo(({ data }) => {
  // Тяжёлые вычисления
  return <div>{data}</div>;
});

const Parent = ({ items }) => {
  const processed = useMemo(() => items.map(process), [items]);
  return processed.map(item => <ExpensiveComponent key={item.id} data={item} />);
};

Вывод

Применяйте виртуализацию для списков с тысячами элементов, мемоизацию для предотвращения лишних перерисовок, а ленивую загрузку — для уменьшения начального бандла. Эти техники критичны для создания отзывчивых интерфейсов с большими данными.