Boost your React performance by a million with this high-school student’s breakthrough

By
Fireship
-
43
334



The Code Report: The Rise of Million JS

It is June 10th 2023 and you are watching the code report

There’s millions of great JavaScript Frameworks in the world today but the most popular choice is still react even though we have faster Alternatives like solid preact and quick that also use jsx one of react’s original Innovations was the Virtual Dom but many modern Frameworks have moved away from this approach and Rich Harris the creator of svelte once called it pure overhead despite this react will likely still be used on websites hundreds of years after we’re all dead but today I have some good news a recent high school graduate named Aiden by just improved reacts performance by 70 percent with million JS which provides a hyper optimized virtual Dom and chains the original virtual Dom to the radiator where it can’t cause any problems when I first saw this my initial thought was no way there’s no way a teenager could Outrender an entire team of top tier engineers at meta but there are benchmarks to back up these outrageous claims like on the gold standard framework Benchmark it ranks way higher than react itself and even beats solid.js and it provides a live demo where you can compare react and millions Side by side now it’s important to point out that benchmarks don’t really represent real world use cases and the vast majority of web apps out there will never get to the point where they have rendering issues with a JavaScript framework however it’s always fun to do some premature over optimization anyway But if you’re a highly experienced react developer you might be wondering what is the virtual Dom I’ve never heard of it well to update things in the UI react makes a lightweight copy of the Dom where it can calculate updates faster and then update everything all at once It’s kind of like finalizing all your changes on a blueprint before you go tearing out walls in a building but all this happens at runtime and there’s a lot of unnecessary work trying to figure out what changed million JS takes a more surgical approach by introducing a compiler that can perform static Analysis to figure out exactly where the dynamic data is in advance it creates an edit map to represent the state of the application which can then determine what has changed with far less computation required this approach is inspired by other Frameworks like svelt and solid which also rely on a compiler To achieve these surgical Dom updates and million was also inspired by the prior work of a library called block Dom what’s also cool about million is that it’s only four kilobytes and extremely easy to use use all you do is take an existing react component and wrap it Inside this block function to create a higher order component which will block out the virtual Dom and let million magically take over basically after the component is mounted it makes a reference to the underlying Dom element then does all the subsequent rendering and change detection on its own in Addition it has a built-in 4 component which is used to render a list of blocks pretty simple but before you get too excited the creator of this project admits that it’s not a silver bullet when using blocks you need to follow a specific set of rules and if you break Those rules it’ll revert back to reacts virtual Dom and you’ll lose all your massive gains overall million JS looks like an awesome project but most importantly it gives me hope that gen Z is not actually Tech illiterate and might actually one day be able to fix react this has been the code report Thanks for watching and I will see you in the next one


RELATED ARTICLESMORE FROM AUTHOR

43 COMMENTS

  1. Did something similar to ensure only the necessary component would update on state change especially with shared props. It’s cool, but as soon as your application is over 30 components or so it’s incredibly complex to manage. Also, fuck redux.

  4. Millennials dissing Gen Z for their work ethics and brains will eventually prove wrong. I strongly believe that this generation will definitely achieve great things which the previous generation has failed to achieve whether it's societal or technological.

  21. … have any of you actually tried it? it is FAR from a plug and play solution – apart from the numerous rules you have to follow in blocks, it will completely break with the addition of some third party libraries (like recoil, for example).

  24. The real question is, why hasn’t everyone already switched to HTMX? It’s how we should be solving the webapp problem. React apps (in my experience) last about 18 months before they need to be totally rewritten again. FE frameworks are not the way to create scalable web apps, most of which are just forms and static data visualisation. Using JSON to drive apps is the flaw, hypermedia should be how you handle your application state, not creating a new application to reimplement what the backend is already trying to do. Maybe one day devs will cotton on to how fundamentally flawed this approach is.

  25. I still believe React should be deprecated. Considering it's structure, I don't think it is logical to avoid Solid, Vue, Svelte, Qwik and go Million. React is a zombie framework, which got created before the Proxy api. All hooks and logical restrictions got implemented by following the non-existing times period. A good software engineer should see this, IMO

  33. Optimizations in the framework always make sense. Yes, you can waste time on it, or actually invest it. An often overlooked part of a green future is not computing stuff that's not necessary – Of course, we'll always have to strike a balance here. This makes your app either faster for your client, or keeps their battery running for longer, or makes it work at all in the first place. How's that a bad thing? It's not, it's great.