В каких случаях тяжелые операции тормозят React?

React использует виртуальный DOM и алгоритм реконсиляции (diffing), чтобы минимизировать реальные обновления DOM. Однако, если сам рендеринг компонентов занимает много времени, это приводит к лагам.

Основные причины:

1. Синхронные вычисления в рендере

   const HeavyComponent = () => {
     const data = processLargeArray(/* 1M элементов */); // Блокирует поток
     return <div>{data.length} items</div>;
   };

   Решение: Вынести вычисления в useMemo, Web Worker или разбить на части.

2. Частые обновления состояния

   const [count, setCount] = useState(0);
   useEffect(() => {
     for (let i = 0; i < 1000; i++) {
       setCount(prev => prev + 1); // 1000 ререндеров!
     }
   }, []);

   Решение: Обновлять состояние одним вызовом (setCount(1000)).

3. Неоптимизированные списки

   {items.map(item => <Child key={item.id} data={item} />)} // Ребёнок не мемоизирован

   Решение: Использовать React.memo(Child) или useMemo для списка.

4. Долгие эффекты

   useEffect(() => {
     while (condition) { /* Бесконечный цикл */ } // Зависание
   }, []);

   Решение: Разбивать на асинхронные задачи или использовать setTimeout/requestIdleCallback.