I’ve been exploring React.js internals and found them hard to access, so I reverse-engineered how React DevTools hooks into React and built a package: <a href="https://github.com/aidenybai/bippy">https://github.com/aidenybai/bippy</a><p>For a bit of context: React represents UI as a tree of "fibers," which hold data like props, state, and context. React updates UI in two phases: render (building the fiber tree) and reconciliation (scheduling & diffing fibers to update the DOM).<p>My tool works by simulating __REACT_DEVTOOLS_GLOBAL_HOOK__ to expose React internals without using DevTools:<p><pre><code> import { instrument, traverseFiberRoot} from 'bippy';
instrument({
onCommitFiberRoot: traverseFiberRoot({
onRender(fiber) {
console.log(fiber);
},
}),
});
</code></pre>
I’ve found it pretty useful for detecting re-renders (I made a separate tool to highlight renders on the page <a href="https://github.com/aidenybai/react-scan">https://github.com/aidenybai/react-scan</a>), but there are plenty other use cases for toy projects or learning how React works.<p>Happy hacking!