React Profiler
Тема дорожной карты · React
React Profiler — это встроенный инструмент диагностики производительности, измеряющий, как часто компоненты в React-приложении рендерятся и какова стоимость этого рендеринга, помогая разработчикам выявлять узкие места в дереве компонентов. Он доступен как в виде компонента <Profiler> в React API — принимающего коллбэк onRender с данными о временных интервалах, — так и в виде вкладки в расширении React DevTools для браузера с визуальным анализом в виде флейм-графа. React Profiler записывает временные показатели фазы коммита, позволяя определить, какие компоненты перерендериваются слишком часто и оказывают ли нужный эффект оптимизации React.memo, useMemo и useCallback. Профилирование включено только в сборках для разработки; в продакшне React опускает накладные расходы на профилирование, поэтому для точных измерений Profiler следует запускать против продакшн-подобной сборки с использованием точки входа react-dom/profiling. Включение React Profiler в рабочий процесс производительности фронтенда — особенно в сложных проектах на Next.js или крупномасштабных SPA — необходимо для поддержания плавного пользовательского опыта и эффективного управления состоянием.
Как это работает
React Profiler — это в основном избегание ненужных ререндеров. React.memo(Component) пропускает ререндер, если props равны по ссылке; парная связка с useMemo/useCallback стабилизирует props. lazy(() => import("./X")) + <Suspense fallback={...}> откладывает загрузку chunk до момента нужды (route-based code splitting). React Profiler (в DevTools) показывает, какой компонент сколько занял и почему ререндерился — читайте перед тюнингом вслепую.
Когда применять
Сначала профайл, потом оптимизация. Lazy-load по route-границе для любого бандла >~200 KB gzipped. Мемоизируйте детей дорогих списков через React.memo + стабильные коллбэки. Windowing (react-window, react-virtualized) — для списков 1000+ элементов. Пропустите useMemo/useCallback для тривиальных значений — оверхед учёта дороже сэкономленного compute в 90% случаев.
Типичные ошибки
Ловушки React Profiler: обёртка каждого компонента в React.memo "для производительности" (стоимость сравнений суммируется — мемоизируйте только листья часто ререндерящихся деревьев); мемоизация значений с дешёвым compute (оверхед больше выгоды); большой бандл без code splitting (медленный TTI); оптимизация без замеров (чините не то). Источник истины — вкладка Profiler в React DevTools.