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);
      },
    }),
  });

Happy hacking!