React Developer Tools - розширення браузера (Chrome, Firefox, Edge) з двома вкладками: Components і Profiler.
Components - дерево компонентів зі станом, props і хуками кожного. Корисне для продуктивності тим, що:
- показує, які props отримав компонент - видно, коли передається новий об'єкт чи функція на кожен рендер;
- у налаштуваннях можна ввімкнути «Highlight updates when components render» - компоненти, що перерендерились, підсвічуються на сторінці. Одразу видно, що введення в поле перемальовує всю сторінку.
Profiler - запис сесії і аналіз:
- натиснути «Record», виконати повільну дію (ввести текст, відкрити список), зупинити запис;
- для кожного коміту (застосування змін у DOM) - діаграма flamegraph: які компоненти рендерились і скільки часу зайняли;
- Ranked - компоненти, відсортовані за часом рендеру;
- клік на компонент - скільки разів і чому він рендерився.
«Why did this render?» - у налаштуваннях Profiler увімкнути «Record why each component rendered»: DevTools покаже причину - змінився стан, змінились певні props, змінився контекст, перерендерився батько.
На що дивитися:
- компоненти, що рендеряться, хоча їх дані не змінились - кандидати на опускання стану, розділення контексту чи мемоізацію;
- один повільний компонент з великим власним часом - важке обчислення в рендері;
- багато комітів на одну дію - ланцюжки оновлень стану в ефектах.
Значок React Compiler: компоненти, оптимізовані компілятором, позначені в DevTools міткою «Memo ✨» - видно, де компілятор спрацював, а де ні.
Важливо:
- вимірюйте production-збірку: режим розробки повільніший (додаткові перевірки, StrictMode) - час у ньому завищений. Для профілювання production потрібна спеціальна збірка з увімкненим профілюванням;
- вкладка Performance браузера доповнює React DevTools: показує, що поза React (мережа, розкладка, стилі) займає час. У нових версіях React додає в неї власні доріжки (React Performance tracks) з етапами рендеру;
- спершу виміряти, потім оптимізувати - інтуїція щодо того, що повільне, часто помиляється.
