Какие знаешь способы оптимизации React-приложения?

// React.memo для компонента
const MemoizedComponent = React.memo(({data}) => <div>{data}</div>);
 
// useMemo для вычислений
const expensiveValue = useMemo(() => heavyCalculation(data), [data]);
 
// Lazy loading компонентов
const LazyComponent = React.lazy(() => import('./HeavyComponent'));

// ❌ Проблема — лишние перерисовки
const ChildComponent = ({data}) => {
  console.log('Перерисовка!'); // Вызывается даже если data не менялась
  return <div>{data}</div>;
};
 
// ✅ Решение — React.memo
const OptimizedChild = React.memo(({data}) => {
  console.log('Перерисовка!'); // Вызывается только если data изменилась
  return <div>{data}</div>;
});

// ❌ Проблема — вычисления при каждой перерисовке
const ExpensiveComponent = ({items}) => {
  const sortedItems = items.sort(); // Сортировка каждый раз!
  return <div>{sortedItems.length}</div>;
};
 
// ✅ Решение — useMemo
const OptimizedComponent = ({items}) => {
  const sortedItems = useMemo(() => items.sort(), [items]); // Только при изменении items
  return <div>{sortedItems.length}</div>;
};

// ❌ Проблема — новые функции при каждой перерисовке
const ParentComponent = () => {
  const handleClick = () => { /* ... */ }; // Новая функция каждый раз!
  
  return <ChildComponent onClick={handleClick} />; // Child перерисовывается
};
 
// ✅ Решение — useCallback
const OptimizedParent = () => {
  const handleClick = useCallback(() => { /* ... */ }, []); // Одна функция!
  
  return <ChildComponent onClick={handleClick} />; // Не перерисовывается
};

// ✅ Lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
 
function App() {
  const [show, setShow] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShow(true)}>Показать</button>
      {show && (
        <Suspense fallback="Загрузка...">
          <HeavyComponent />
        </Suspense>
      )}
    </div>
  );
}

// ✅ Для больших списков
import {FixedSizeList as List} from 'react-window';
 
const VirtualizedList = ({items}) => (
  <List
    height={600}
    itemCount={items.length}
    itemSize={50}
  >
    {({index, style}) => (
      <div style={style}>{items[index]}</div>
    )}
  </List>
);

// ✅ Разделение кода на части
// Вместо одного большого бандла — несколько маленьких

// ✅ Анализ размера бандла
// Проверка, что не попало лишнего

// ✅ Всегда используй production сборку
// Development версия медленнее

// ❌ Плохо — мемоизация тоже имеет стоимость
const OverOptimized = React.memo(({simpleProp}) => {
  return <div>{simpleProp}</div>; // Нет смысла мемоизировать простые компоненты
});
 
// ✅ Хорошо — мемоизировать сложные компоненты
const ReallyComplexComponent = React.memo(({expensiveData}) => {
  // Сложные вычисления
});

// ❌ Ошибка — неправильные зависимости
const value = useMemo(() => calculate(data), []); // data не в зависимостях!
 
// ✅ Правильно — все зависимости указаны
const value = useMemo(() => calculate(data), [data]);