Расскажи об оптимизации рендеринга в React.

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

Основные подходы:

• Memoization (React.memo, useMemo, useCallback):

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

    // Пример с React.memo
    const MyComponent = React.memo(function MyComponent(props) {
      // ...рендер содержимого
    });
    

  • useMemo(): Мемоизирует значение (результат вычисления), пересчитывая его только при изменении зависимостей.

    // Пример с useMemo
    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
    

  • useCallback(): Мемоизирует функцию-колбэк, предотвращая ее пересоздание при каждом рендере родительского компонента. Полезно для передачи колбэков в мемоизированные дочерние компоненты.

    // Пример с useCallback
    const handleClick = useCallback(() => {
      // ...логика обработчика
    }, [dependency1, dependency2]);
    

• Оптимизация списков (Ключи): Использование уникальных key для элементов списка помогает React эффективно обновлять DOM, идентифицируя, какие элементы добавились, удалились или изменились.

  // Пример с ключами
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
  

• Ленивая загрузка компонентов (React.lazy, Suspense): Разделение кода (code splitting) позволяет загружать компоненты только при необходимости, уменьшая размер первоначального бандла. React.lazy используется для динамического импорта, а Suspense для отображения fallback UI во время загрузки.

  // Пример с React.lazy и Suspense
  const OtherComponent = React.lazy(() => import('./OtherComponent'));
  
  function MyPage() {
    return (
      <Suspense fallback={<div>Загрузка...</div>}>
        <OtherComponent />
      </Suspense>
    );
  }
  

• Виртуализация списков (React-Window, React-Virtualized): Для очень длинных списков отображается только видимая часть, а не весь список сразу, что значительно улучшает производительность рендеринга.

• Избегание ненужных обновлений состояния: Объединение обновлений состояния, использование функциональной формы setState в классовых компонентах или прямое использование актуального состояния в хуках (setState(prevState => ...)) помогают избежать лишних перерисовок.

• Использование PureComponent (для классовых компонентов): Аналогично React.memo для функциональных компонентов, PureComponent выполняет поверхностное сравнение пропсов и стейта, предотвращая лишние перерисовки.

• Минимизация логики в методе render/теле функционального компонента: Сложные вычисления лучше выносить в useMemo или за пределы рендера.

• Профилирование: Использование React Developer Tools Profiler помогает выявить узкие места в рендеринге.