Какие есть способы оптимизации производительности в React?

Для оптимизации производительности в React можно использовать следующие подходы:

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

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

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

function App() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);

  return (
    <div>
      <Button onClick={increment} label="Нажми меня" />
      <p>Счётчик: {count}</p>
    </div>
  );
}

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