High-school student makes React a million times faster

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

Channel: Fireship

Views: 1,184,787

Keywords: webdev, app development, lesson, tutorial

Id: VkezQMb1DHw

Length: 2min 46sec (166 seconds)

Published: Sat Jun 10 2023