Single Line React Performance Boost with Million
Вставка
- Опубліковано 11 вер 2024
- Turbo charge your React application with the new block rendering engine in Million.
Upcoming NextJS course: pronextjs.dev
Code: github.com/jhe...
Liminal: www.liminal.sh/
Thank you for the amazing content you are publishing very often Jack, you are top 1 content creator in the world for React/Next and all things Javascript/Typescript related. One big thank you from the developers all around the world. You make a huge impact on our careers and I am forever grateful
This is amazing content. Thanks for sharing the stuff that’s unknown to most engineers. Really helpful too 🙏🏻
Mmm. I'm a Solid fanboy, so I didn't see a need for this until you said "surgical implementation." Going to try this out.
yayyy so glad to see this , just what I was asking for =)
Thank you for the amazing content as always! 🎉
Million is a nice tool ngl but I think some people are now gonna use it in places where it doesn't need to be (or otherwise premature over-optimization).
I think your tips for choosing it are good one.
- React perf
- Then million
- Full rewrite to Svelte/Solid/Qwik/Preact
Unfortunately I left React before even knowing million existed && now I am stuck in Svelte land.
We need some merch with the slogans from the intro!
I heard good things about million. Now i experienced it.
I wish you gave more details about how Million achieves this performance boost. I think the first step you mentionned at the end is crucial, using React profiler and understanding the root cause of the slowness. I’m afraid junior devs will directly jump in to step 2 and try Million without fixing the actual root cause, kind of like devs using ChatGPT without understanding what it outputs. Also step 3 shouldn’t be an advice in my opinion… it should never happen that you need to drop React because of performance.
In codebase where the component is 1500 lines of code, some old developer write some code without tests I will jump straight to million... I drop React because is crap, and in every next project I will have the chance, I will replace react without thinking...
Fell in love with your prompt 😂. Mind sharing that fancy arrow. I couldn’t find that anywhere.
It's the "atomic" prompt from oh-my-posh.
I feel mischievous watching such content 😂😂😂
your amazing
right on point
Offtopic: is there a video on which zsh terminal/theme you are using?
Hey jack! Great video, thank you. Was wondering how you were doing the code highlighting/dimming the code around the block you are taking about, really cool effect!
It's a post editing filter. These aren't done live, but in editing before publishing. There are a number of ways to do that.
Yep. I use screenflow and the fact that I use a pure black background makes it a lot easier to highlight the code fragments.
Is that a new intro? "Make it work, then make it beautiful" is my motto since I became a lead developer, but I have no idea where I got it from…
Yeah! That’s our new intro and we’ll be doing some swag and what not with it. It’s a good motto and it captures the essence of what we’re trying to do with the channel; practical advice for working devs.
Hello Jack, thanks for your great content, it's so helpful, what is your zsh theme name?
Thanks for the video Jack, interesting introduction to Million. However in your outro you only suggest a "roadmap" for sort of alternatives to simply use Million pretty much everywhere. Are there cases where adding Million creates more issues than it solves?
I think if you follow the rules you should be pretty good. That being said, this is definitely hacking on the React side. So... if you don't really need it, then I wouldn't use it.
Hello Jack what zsh theme is that? Thank you, love all your vids anyway…
That actually makes us question, why even use React if it's virtual DOM is the biggest hurdle in performance?
React's ecosystem is still second to none. And for more IRL applications the VDOM performance is just fine. It's pretty fun to play around with speeding it up, but 1,440 divs rolling at 60 FPS is cool, but not something most folks need every day.
@@jherr Taking what Jack said, if you are rendering 1440 divs in your app all at the same time, you have a product design issue, not a React issue
just curious - Do you have any full React-project-based courses? Can you include links to those in your descriptions? Awesome channel btw!
I have a full learning React playlist, check the channel page under playlists.
Nice vid, thanks! Any tradeoffs we should be aweare when using Million?
There are some documented rules around the blocks and what you can and can't do with them in the documetation.
did you mention that it doesn't work with component libraries? makes it DOA in my opinion.
My dude! Cool!
Hi! @jack
Always great to see your content. Very helpful and insightful a lot of times.
Can you please make a video on best practices for using gravity type animations in react for html components (div/box etc...)?
You mean physics based animations?
They should wrap JS in Million. :O
Sir, thank you for your all effort and contents. Mind if I introduce your million rainbow projects to my Korean viewer in my video?
Go for it!
Since react is recommending nextjs and remix as default frameworks, I wonder if million can be used inside these frameworks.
Yea pretty obvious that the For syntax takes inspiration from SolidJS lol but SolidJS is still better with how its components doesnt re-run
I hope people understand that React is not a silver bullet and that it's okay. A lot of them defend React until their last breath using anecdotes and it's frustrating to see the lack of understanding of the fundamental model of React. There's a reason why they had to introduce time slicing and rewrite to a 'fiber' architecture
What zsh theme do you use? I thought it was powerlevel10k for a second but it looks a tiny bit different
Currently it's "atomic"
It's like doing a bunch of coke and then saying Look how fast I work!
does he edit the video himself? the editing/effects are so good
I didn't edit the sting section (the Make It Work, Good, Fast, logo section) but the rest I edited, yeah. Thanks!
Dang how do you even discover stuff like this by yourself?
Font family name used in the vscode please?
JETBrains Mono
Just one question Jack, is the React virtual DOM (structure + algorithm) just about the node/tree optimization, or is there more to it? ChatGPT tells me that React does consider the details of the UI and CSS into account, which I think is wrong.
Linters take the details of the UI and CSS into account, for example, applying alt tags to images. But the core React library is simply about node/tree management, as you say. That's why it works for both React and React-Native, as well as all the side projects folks have thrown it on.
Is it possible to wrap the main App and million everything?
latest million can do better u just do auto: true on the config and it auto put million every single one xD but make sure u use 2.6.4 not 3.x because 3.0.2 will throw an error. its not stable yet.
What do you think about Million JS with React Native?
Haven't tried it. Though I think it might be hard-wired to the web DOM.
No need because UI already runs on native thread. The bottleneck is the JS bridge and JS thread. The thread is being rewritten in C++ in the new architecture.
why you are not using canvas?
That wouldn’t demonstrate million because canvas is just a single tag.
Have they altered the current VDOM react implementation?
They've replaced it within the context of the block. So the app remains a React application, the top level component is rendered using the VDOM. But the component that renders the rainbow divs is managed by Millions block renderer.
@@jherr Got it. What's the strategy this block renderer is using?
@@taimoorsheikh5001 As mentioned and shown in the video there is a documentation section on the Million site million.dev/docs/quickstart#hitting-the-limit that covers the basics of the block rendering approach.
@@jherr Thanks again :)
How can I install oha in windows 10
If you need a solution like this, you 100% need to rethink how you've structured your project. Adding million means another layer of abstraction. That means your components are now more complex, and you've also got hidden edge cases introduced by million that you'll have to debug. All of that makes bug tracing exponentially more difficult. It's also going to mean migrating your components to another framework, or even a new version of React more difficult.
Overall, I'd say that this is a TERRIBLE idea. The fact you don't see this being needed in other frameworks like Svelte or VUE says a LOT about how bad React actually is.
Why do you look like Donald Trump?
I'd probably try a useLayoutEffect instead of useEffect. Excellent regardless
It only gets run the once, but, sure, that one run of the effect callback would be called slightly more quickly with a layout effect. :)