React Internals Explorer - easily see how React works

Introducing DDIR Companion App

Why I built it?

When I first tried to dive deeper into React in 2021, I drew myself a few diagrams to help myself understand React internals, below is one of them.

Obviously it is a lot of manual effort and also it is just a static image, what if we can visualize React internals automatically and make it dynamic? I had this idea of visualization tool in my mind for a long time, and finally I made it happen.

How to use it?

The UI of RIE(React Internals Explorer) should be straightforward, basically you can

  1. Choose React version (currently supporting 18.3.1 and 19-rc)
  2. Edit your code or choose the built-in snippet
  3. Click the “Run” button to inspect the React internals
  4. Interact with the preview and see the the internal updates.

For example you can choose “Suspense - multi throw” snippet and see how React@19 and React@18 handle things differently

Maybe it is easier to watch my quick intro video. 😳

Update on 0.1.23

Next steps.

RIE(React Internals Explorer) is still in early stage, as companion app for DDIR(Deeper Dive Into React), I’ll try to cover more flows and make it easier to use.

If you have better idea or bug reports, please drop me a message.

Want to know more about how React works internally?
Check out my series - React Internals Deep Dive!

😳 Share my post ?    
or sponsor me

❮ Prev: Deeper Dive Into React - React course by JSer

Next: Try out React 19 in ESM without build tools