Способы профилировки React-приложений
Эдди Османи написал статью про актуальные способы профилировки React-приложений — "Profiling React.js Performance".
В статье рассказывается про React Profiler API, React Interaction Tracing API, User Timing API, про использование puppeteer и lighthouse для поиска проблем производительности.
С помощью React Profiler API можно получить подробную информацию о рендеринге компонентов. Для этого нужно обернуть интересующий компонент в <Profiler>
и передать в пропсе onRender
функцию, которая будет вызываться на каждое обновление компонента. Interaction Tracing API — это экспериментальное API, с помощью которого можно отследить, какое событие стало причиной медленного обновления, или, например, измерить сколько времени проходит с момента нажатия на кнопку и фактическим обновлением DOM.
Хорошая статья. Рекомендую почитать всем, кто работает с React.