Производительность и React Compiler

Вы найдёте bottleneck, отличите render от commit/network/layout, включите Compiler и докажете улучшение без регрессии.

До начала достаточно render model, Compiler toolchain, Suspense и browser loading. В конце должен появиться не конспект, а performance report до/после для тяжёлого dashboard с budget и regression test.

Зафиксируйте устройство, build, dataset и действие. Метрика должна отражать UX: LCP, INP, CLS, route transition, typing latency. Среднее скрывает хвосты; смотрите distribution/p75 и lab trace вместе с field data.

Рабочая проверка. Запишите baseline p75 и сценарий.

Типичная поломка. Оптимизировать по одному случайному console.time.

React DevTools Profiler показывает commits, components и причины updates. <Profiler> даёт programmatic callback. Development overhead отличается production, поэтому используйте profiling build/реальные traces. Сначала найдите дорогую ветвь и частоту, затем ownership/props.

Рабочая проверка. Найдите unstable Provider value.

Типичная поломка. Судить по render count без duration.

Compiler автоматически мемоизирует на build-time, если код соблюдает Rules of React. Он не лечит network waterfall, огромный DOM или layout thrashing. Compiler diagnostics помогают найти мутации/нечистоту. Версию лучше pin при rollout и обновлять с E2E.

Рабочая проверка. Сравните output/trace compiled subtree.

Типичная поломка. Считать Compiler универсальным performance fix.

memo пропускает render при равных props, useMemo кэширует вычисление, useCallback function identity. Кэш не делает вычисление корректным и имеет стоимость. Нужна стабильность при дорогом child/external dependency, а не чтобы удовлетворить случайный lint suppression.

Рабочая проверка. Измерьте memo child до/после стабилизации props.

Типичная поломка. Новый object prop делает memo бесполезным.

Если тысячи DOM rows создают render/layout/paint cost, windowing оставляет видимую область и overscan. Нужно сохранить keys, scroll anchoring, keyboard/focus, dynamic heights и screen-reader strategy. Pagination может быть продуктово лучше бесконечной виртуализации.

Рабочая проверка. Измерьте DOM nodes и scroll behavior 10k rows.

Типичная поломка. Виртуализировать список из 20 строк.

Измеряйте compressed transferred bytes, parse/execute и waterfall. Route/feature splitting уменьшает initial JavaScript, но чрезмерные chunks добавляют requests. Preload только действительно скорого критичного ресурса; prefetch — вероятного будущего. Tree shaking зависит от ESM/sideEffects.

Рабочая проверка. Проанализируйте bundle и lazy chart.

Типичная поломка. Импорт whole utility library ради одной функции.

React render может быть быстрым, а layout дорогим из-за DOM/CSS. Reserve image/media dimensions, избегайте forced synchronous layout read-write loops, animate transform/opacity осознанно. CLS измеряет unexpected shifts, не transitions по пользовательскому действию одинаково.

Рабочая проверка. Уберите shift у card images.

Типичная поломка. Изображение без width/height/aspect-ratio.

Performance budget задаёт пороги bundle, route latency/Web Vitals и критического interaction в контролируемой среде. CI lab metric шумна, используйте допуски и trend; field monitoring ловит реальные devices. Не блокируйте merge по одному нестабильному запуску без повторов.

Рабочая проверка. Добавьте bundle budget и trace artifact.

Типичная поломка. Ручной аудит один раз перед запуском.

Профилируйте dashboard: медленный selector, unstable context, 10k rows, chart chunk и layout shift. Включите Compiler, исправьте ownership, виртуализируйте список, lazy-load chart и измерьте interaction/Web Vitals.

Критерий завершения: есть baseline, trace, гипотеза, изменение и повторное измерение; тесты подтверждают семантику. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.