Show HN: Reverse Engineering React.js Internals

2 points by aidenyb a year ago · 0 comments · 1 min read

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: https://github.com/aidenybai/bippy

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).

My tool works by simulating __REACT_DEVTOOLS_GLOBAL_HOOK__ to expose React internals without using DevTools:

  import { instrument, traverseFiberRoot} from 'bippy';

  instrument({
    onCommitFiberRoot: traverseFiberRoot({
      onRender(fiber) {
        console.log(fiber);
      },
    }),
  });

I’ve found it pretty useful for detecting re-renders (I made a separate tool to highlight renders on the page https://github.com/aidenybai/react-scan), but there are plenty other use cases for toy projects or learning how React works.

Happy hacking!

No comments yet.

Settings

Show HN: Reverse Engineering React.js Internals

Keyboard Shortcuts