Расширение для отладки React приложений – Reactime
Инструмент позволяет отследить количество рендеров компонента и среднее время рендера. Киллер-фичей расширения является возможность переключения текущего состояния приложения – time-traveling, как в Redux DevTools.
Принцип работы расширения заключается в обходе дерева React Fiber и в сборе информации о рендере компонента. Reactime сохраняет каждый снапшот рендера компонента, включая стейт и время рендера, после чего строит граф компонентов. Расширение умеет сохранять стейт как у классовых компонентов, так и у функциональных, которые используют хуки.
Для работы расширения не требуется каких-то изменений в коде проекта, достаточно запустить его в браузере и иметь уже предустановленный React DevTools.
chrome.google.com/webstor…jfeidjga
🇺🇸 medium.com/@liueda…67b9eb89