Дан компонент из 1000 строк, который тормозит. В нем галерея из 100 картинок (10% битых) и большой список элементов. С чего начнешь оптимизацию и с помощью каких средств?

// React DevTools Profiler
// - Запись взаимодействий
// - Поиск "expensive" компонентов
// - Анализ времени рендера

// Chrome DevTools Performance tab
// - Record performance
// - Identify bottlenecks
// - Memory leaks detection

// Вместо одного большого компонента
const BigComponent = () => {
  // 1000 строк кода
};

// Разделить на логические части
const OptimizedComponent = () => (
  <>
    <Gallery images={images} />
    <ItemList items={items} />
    <UserPanel user={user} />
  </>
);

// React.memo для предотвращения лишних рендеров
const Gallery = React.memo(({ images }) => {
  return images.map(image => (
    <Image key={image.id} src={image.url} />
  ));
});

// useMemo для тяжелых вычислений
const processedItems = useMemo(() => {
  return items.map(heavyTransformation);
}, [items]);

// useCallback для стабильных ссылок
const handleClick = useCallback((id) => {
  // обработка клика
}, []);

// Использование react-window или react-virtualized
import { FixedSizeList as List } from 'react-window';

const VirtualizedList = ({ items }) => (
  <List
    height={400}
    itemCount={items.length}
    itemSize={50}
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index].name}
      </div>
    )}
  </List>
);

// Lazy loading с Intersection Observer
const LazyImage = ({ src, alt }) => {
  const [isVisible, setIsVisible] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    });
    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef}>
      {isVisible && <img src={src} alt={alt} />}
    </div>
  );
};

const ImageWithFallback = ({ src, alt, fallback }) => {
  const [hasError, setHasError] = useState(false);
  const [currentSrc, setCurrentSrc] = useState(src);

  const handleError = () => {
    if (!hasError) {
      setHasError(true);
      setCurrentSrc(fallback);
    }
  };

  return (
    <img 
      src={currentSrc} 
      alt={alt}
      onError={handleError}
      loading="lazy"
    />
  );
};