React Profiler, компилятор и продакшн-наблюдаемость

Пользователи сообщают о лагах. В офисе всё работает нормально. Profiler показывает commit на 38 мс, вызванный нажатием клавиши в поле поиска — и 240 ProductCard перерендериваются с причиной «parent rendered, props unchanged». Это сигнатура бага. Без Profiler вы гадаете; с ним исправление механично.

Чтение React Profiler. React DevTools Profiler записывает timeline по commit-ам. Для каждого commit он показывает, какие файберы рендерились, почему каждый рендерился («props changed», «hook changed», «parent rendered», «context changed») и сколько каждый занял. Senior-воркфлоу: запись взаимодействия, поиск слишком длинного commit-а, сортировка файберов по self-time, чтение причины «why did this render».

• «Parent rendered» при неизменившихся props → отсутствующий bailout. Обернуть в React.memo, стабилизировать ссылку на нарушающий prop.
• «Context changed» на множестве компонентов → нестабильное значение контекста. Мемоизировать значение провайдера через useMemo.
• «Hook changed» → изменилось значение useState или useReducer. Проверить, мемоизировано ли вычисление, производящее его.

Commit #47  —  render: 38.2 мс  (1 из 1 закоммичено)

<App>                отрендерился  — 0.4 мс  — "hook changed"
  <Header>           отрендерился  — 0.2 мс  — "parent rendered"
  <Sidebar>          отрендерился  — 0.3 мс  — "parent rendered"
  <ProductGrid>      отрендерился  — 36.9 мс — "parent rendered"
    <ProductCard> x240  отрендерился  — 0.15 мс каждый — "parent rendered"

Почему отрендерился <App>?  -> useState (searchTerm) изменился
Примечание: props у <Header>, <Sidebar>, <ProductGrid> не изменились

Продакшн-наблюдаемость: LoAF + Profiler. Profiler даёт локальное воспроизведение; Long Animation Frames (LoAF) дают продакшн-атрибуцию. Когда LoAF-запись атрибутирует медленный кадр React-бандлу, Profiler воспроизводит это локально и называет точные файберы. Вместе они закрывают петлю от «пользователи сообщают о лагах» до «этот компонент рендерится 200× из-за инлайнового style-объекта на строке 44».

React Compiler и будущее мемоизации. Десятилетие поддержание bailout означало ручной разброс useMemo, useCallback и React.memo — утомительно, подвержено ошибкам, и само по себе не бесплатно (каждая memo-ячейка стоит памяти и сравнения). React Compiler (бывший «React Forget», стабильный трек с React 19) — build-time инструмент, анализирующий код компонентов и вставляющий мемоизацию автоматически и корректно, с более тонкой гранулярностью, чем делает человек. Он понимает, какие значения зависят от каких входных данных, и мемоизирует именно их, так что bailout срабатывает без рукописных хуков.

Senior-вывод: механизм — ссылочная стабильность, открывающая bailout — никуда не денется; это фундамент, на котором строится компилятор. Понимание того, почему стабильная ссылка позволяет fiber пропустить работу, — это то, что позволяет читать вывод компилятора, отлаживать его при консервативных bailout-ах и рассуждать о производительности вне зависимости от того, написана мемоизация вручную или сгенерирована компилятором.

Fiber — это место, где живёт состояние компонента между рендерами: значения useState, рефы, список хуков — всё это висит на fiber, а не на функции компонента. Рендер за рендером, fiber сохраняется и несёт это состояние вперёд; уничтожить fiber (размонтировать, сменить тип, сменить ключ) — и состояние исчезнет. Реконсилер в основе своей — машина для принятия решений о том, какие файберы выживают, а какие перестраиваются: тот же вопрос о statefulness, о том, что сохраняется при переходе, а что пересчитывается, который проходит через каждый уровень стека. ↻ состояние