Name: Sobes.tech
Rating: 4.9 (250 reviews)

Оптимизация в React включает несколько подходов для повышения производительности и снижения избыточных рендеров:

Использование React.memo для мемоизации функциональных компонентов, чтобы предотвратить повторные рендеры при неизменных пропсах.
useCallback и useMemo помогают мемоизировать функции и вычисления, чтобы не создавать новые объекты и функции при каждом рендере.
Разбиение на мелкие компоненты для локализации изменений и уменьшения области перерисовки.
Ленивая загрузка компонентов (React.lazy и Suspense) для уменьшения первоначального размера бандла.
Оптимизация списков с помощью key и виртуализации (например, react-window) для эффективного рендеринга больших списков.
Избегание анонимных функций и объектов в пропсах, чтобы не вызывать лишние рендеры дочерних компонентов.
Профилирование с помощью React DevTools Profiler для выявления узких мест.

Пример использования React.memo и useCallback:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{children}</button>;
});

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment}>Increment</Button>
    </div>
  );
}

Здесь Button не будет перерисовываться без необходимости, так как onClick мемоизирован.

Как занимаешься оптимизацией в React?