Для чего нужен React DevTools Profiler?

Короткий ответ

React DevTools Profiler показывает, какие компоненты рендерились, сколько времени заняли, почему обновились (props/state/hooks) и как выглядят коммиты во времени.

Как пользоваться (смысл)

1. Открыть вкладку Profiler, начать запись.
2. Воспроизвести сценарий (ввод, открытие модалки, фильтр).
3. Остановить — увидеть flamegraph / ranked chart.
4. Найти «толстые» коммиты и компоненты с частыми рендерами.

Что даёт на практике

• Отличить «рендерится часто, но дёшево» от «редко, но 80ms».
• Проверить, помог ли memo / вынос state.
• Увидеть cascade: родитель обновился → дети без memo пошли следом.

Связанные инструменты

• Highlight updates — визуально мигают перерисованные узлы.
• Why did this render? (расширения/флаги) — какая зависимость изменилась.
• Браузерный Performance — если упёрлись в layout/paint вне React.

На собеседовании

Profiler — доказательная база оптимизации. Сильная формулировка: «не гадаю, смотрю commit duration и причину рендера, затем сужаю подписку или мемоизирую лист». Без цифр React.memo — декоративный шум. Связка с memo/useMemo и виртуализацией усиливает ответ.

Что добавить на собеседовании

Сформулируйте проблему, покажите минимальный рабочий пример на JSX/хуках и назовите типичную ошибку новичков. Так ответ звучит практично, а не как пересказ документации. Свяжите тему с соседними API React (effects, refs, memo, concurrent), чтобы показать системное понимание.