Bippy — React DevTools для взрослых 😈
Bippy даёт прямой доступ к React fiber tree и событиям рендера для создания собственных инструментов.
Bippy — это тулкит, который притворяется React DevTools и через __REACT_DEVTOOLS_GLOBAL_HOOK__ перехватывает события рендера, позволяя работать с fiber напрямую.
Проще говоря — это способ «залезть внутрь React» без форка React и без хаков в коде приложения.
Что умеет:
- 🧠 доступ к fiber tree (props, state, context компонентов)
- 🎣 хуки на события рендера (
onCommitFiberRootи др.) - 🌳 обход дерева fibers удобными утилитами (
traverseFiber,traverseRenderedFibers)
🔥 Самое интересное
Ты можешь перехватывать каждый commit React и проходиться по fiber-дереву, получая полный снапшот приложения: какие компоненты есть, какие у них props/state, что реально перерендерилось. То есть это уровень ниже любых devtools — фактически свой runtime-инспектор React.
Когда это нужно
🛠 Если делаешь инструменты Например, тот же react-scan построен поверх Bippy. Если хочешь писать свои devtools, анализаторы рендеров или runtime-инспекции — это база. 🔬 Исследования и сложные кейсы Когда нужно понять, как реально работает React под капотом, или достать данные, которые обычным способом недоступны.
⚠️ Но есть нюанс
Это прямой хак в React internals, которые могут меняться в любой момент. Авторы сами предупреждают, что это может ломать приложения и не подходит для продакшена.
Если ты не уверен, зачем тебе это — скорее всего, тебе это не нужно. 😄