Our great sponsors
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
React is crazy high in abstraction from what's actually happening. Your data goes through many "translation" steps before actually being rendered to the screen.
1. You have your signals and stuff - the actual data you want rendered.
2. React creates a virtual DOM tree thing out of your markup.
3. That virtual DOM gets turned into real DOM.
4. React gives the real DOM to the browser, who probably has to shift a lot of internal data around to accommodate changes.
5. The browser loops through its DOM and draws it on the screen (somehow - another black box).
This is a crazy amount of internal bookkeeping. Compare this with something like Dear ImGui (https://github.com/ocornut/imgui) where it's more like:
1. You have raw data in memory (just ints and char arrays).
2. You loop over your data, generating vertices for the GPU.
3. You give those vertices to the GPU to render a frame.
IMO this is way easier to reason about. It may seem "inefficient" as you're building up the entire screen from scratch for each frame. But if your content is static, who cares? You can draw one frame and leave it there for as long as you need. If your content is animated, you're probably already redrawing each frame from scratch anyway. At least you know that it's happening now that you've removed the endless layers of black box tree structures.