This New React Feature Will Make Your App 20% Faster

you can finally start using the brand new react 19 compiler which includes a bunch of performance optimizations to make your code run faster and make it easier to write and in this video I'm going to show you how you can get started with this compiler using V or using nextjs and all the different things the compiler does for you because it's honestly quite impressive welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video we're talking all about the react compiler now I'm first going to go through the setup steps inside of v and then nextjs and then talk about what the react compiler really does for you now this react compiler is part of the release candidate version of react essentially the beta version of react so if you want to be able to try this out and test it you're going to need to make sure that you install the react at RC and react Dom at RC versions this is going to download a beta version of react that's going to include all of these different changes also if you're using typescript you're going to want to make sure that in inside of your package Json you include these dependency overrides to make sure you're using the correct types for the newer changes inside of react that are in this release candidate that aren't in the normal version of react then in order to actually start working with the compiler you first need to check your existing code to see if it'll actually work with the compiler because some code won't work with the compiler for example if your code doesn't follow the normal rules of react but if you've been writing your code using good react best practices you shouldn't have any issues with this so what we can do is actually just copy this command and run inside of our terminal hit enter and this is going to go through and it's actually going to check all the components in our project as you can see it's checked both of our components and it says both of them are being able to be compiled it says we are using strict mode and you can see that we are not using any libraries that are incompatible certain libraries are not going to be compatible with this and they'll be listed here as well as any components that are unable to be compiled now another really important thing is figuring out which one of your components actually are not able to be compiled and that's where this eslint plug-in react compiler comes in this is going to help you figure out which components are not able to be memoized and compiled and why those different errors are so I'd recommend making sure you install this and modifying your es lint config to include it that way you can get warnings for particular components that don't follow the rules of react and are not able to be compiled now all of those steps I talked about are going to be the same for no matter what project you're actually using but if you want to create a project specifically with v there's one particular step that you need to complete in order to actually get this to work if we scroll down here you need to install this Babble plug-in react compiler and then inside your V config you essentially need dim menion inside a react that you're using that particular compiler another really important thing to note about this is that if you're using react inside a v you can use either the S swc version or the normal version of react and you need to make sure you're not using the S swc version otherwise this Babble plugin will not work so just make sure you're using the normal plug-in react and not the S swc version so overall getting set up inside of V is really easy and you'll notice my code slightly different here I don't actually have any options being passed in if you want to use the compiler on every single file in your project just pass in no options and it's going to use it in every single file possible you can pass in an option here though and if we scroll up a little bit we can kind of see the main thing you want to configure for that option you can see we can change the compilation mode so I can come in here compilation mode I can set that to annotation and now only the files that have used memo inside of the components are actually going to be memoized but if I leave this off like I had before it's just going to memo wise and actually compile every single component in my project now if you're using nextjs it's actually even easier to get set up you just need to make sure you're using the canary version of nextjs install that exact same compiler and then you just need to configure this inside your experimental version to say you want to compile this equal to true or you can set a certain option inside here for different configurations for example if you only want to do it inside of components that you're actually annotating either way you just do it in this experimental thing right here and that's all you need to change to make it work in nextjs so it's very easy in nextjs so now that we have that set up let's actually talk about what this is going to do for us so I want to really quickly look at the code that I have written cuz it's relatively straightforward code that it's going to be pretty common in almost any project you work in as you can see here I have two State variables a count and a name I have a use effect that's just printing anytime I'm inside this app component and then you can see down here I have a button that whenever I click it I increment my account you can see that's incrementing my account and same thing here I have an input component that anytime I change that you can see that it's changing this input and it's also printing out that value down here because I'm passing that name value down to my child logging every time I render my child and I'm printing that name out down here so it's relatively simple code and this is going to show all the different use cases that we have for the compiler that make things already so much better for example if I close out of this you'll notice immediately when I change my account it's only rendering my app while in a normal react application it would actually render the child as well since the child is inside of the app a really easy way for me to show you what this looks like before and after is to actually go back into my V config and enabling this to only work when I annotate the file so here I can just set my compilation mode to annotation just like that and now we can see immediately nothing's being annotated so we're back to the normal way of doing things inside a react so if I close out of that and I change my count you'll notice both my child and my app are being rendered even though my child doesn't even care about that count component or that count variable at all but this is how normal react works if I wanted to get around this I would need to wrap this entire component in a react. memo to memoize this component and only rerender it when the props change it's a bit annoying to do kind of cumbersome and something that's very easy to forget to do for example if you wrote your code you'd most likely forget to do this in this particular scenario so if we're actually doing the memoization like we're supposed to so I come in here I say use memo on both of these components and now I save and I refresh you'll now notice my app is the only thing changing when I change my account but when I change my name which is used by both my app and my child you can see it's rendering both of those components so it's smart enough to know that I don't need to render my child when the props are not changing relatively straightforward and essentially removes the need for react. memo but this goes even further and completely removes the need for the used memo and the used callback hook as as well one of the biggest problems you're going to run into when you're writing react code as a beginner is the problem with how use effect dependencies work I'm going to come in here I'm going to create a variable called settings I'm going to set it equal to an object which is just going to have some value inside of it we'll just say test doesn't really matter what this is and then we're going to have the name be saved inside of here as well actually let's just make it the count so only the settings is only going to be changing whenever my count changes otherwise it's the same every single time then I'm going to come down here with a use effect that's just to console.log settings changed there we go and then in my dependencies I'm going to set my settings because I only want to run this when my settings change now I'm going to get rid of my memorization that I have so I'm just going to completely remove this so we're back to the normal react way of doing things I'll just get rid of that line completely and when I give this a save you'll notice every time I change my account my settings does change but when I change my name my settings also change and that's because essentially of react if I hover over this you can see that the setting object is essentially always being recreated every single time I run my component so instead you'd have to wrap this inside of a Ed memo to make sure it only changes when my account variable changes and that's how you would fix this particular problem this is a relatively easy thing to notice but it's kind of a pain to program and it's really easy to forget this in particular scenarios and run into problems but if I actually memoize my code so if I bring that used memo back in there immediately if I close out of all this you'll notice when I change my name my app and my child are rendering but this used effect is not actually rerunning because react is smart enough to to say you know what this settings only changes when my account changes and my account didn't change so don't update the settings which means my use effect is not going to run but when I change my account you'll notice that this use effect is running because the settings variable is changing and react is smart enough to see that so essentially it's done the same thing as use memo but I didn't need to write out the used memo myself so this is really nice because it gives you pretty much free performance games without you having to do anything on your side and it makes your code a little bit easier to understand read and write another really nice thing about this is if you're using the react developer to and you go into this component section it'll actually tell you which components are being memorized you can see it says memo next to all the components that are being memorized and if I come in here and I remove the used Memo from my child you'll now see if I refresh my page here you'll see that only the app component is being compiled while the child component is not going through any additional compilation steps and that's again only because I have this particular setting right here if I didn't put in this particular setting it would just memorize all my components by default and do all of that compilation for me let's bring that compilation back in there so we are making both of these memoized by default now it is possible to run into errors where this doesn't work and that's essentially anytime you break the rules of react and one of the main rules of react is that all of your components must be pure functions which means they cannot rely on external state so for example if I just create this Global count variable set it equal to zero and then inside my component I do something to that Global count variable for example I increment it and then I log out my Global count like this now immediately I'm depending on external State and I have side effects inside of my component those are both rules that are breaking these are things you cannot do inside a react so these are no longer able to be memoized with the compilation that I'm doing you can see immediately that memo next to my app is gone away because this component cannot be compiled and actually if I just rerun this compiler check you notice it'll now say only one out of my two components are able to be successfully compiled because I now have this rule that I'm essentially breaking and you'll notice that a lot of my console logs are now no longer working like I expect for example this settings variable is being changed all the time which is not ideal and my child component is rendering even on the times I only change my account variable and that's again just because this app component can't be compiled and since I'm rendering child inside of it it can't do the extra compilation steps for that as well now for the most part though if you're writing good quality react code you probably shouldn't have anything in your code that looks like this so you shouldn't run into any of those problems at all and it should be able to actually memoize everything properly just out of the box for you for pretty much all of your components and if there are a few that aren't properly able to be memorized it's really easy for you to go ahead and fix the instances where they are or just opt them out of memorization by doing annotation where you only memoize specific components I'm going to be honest this is probably the most excited I've been for react feature in quite a while because used callback use memo and react. memo are three of my least favorite features in react since they're so easy to mess up and they're really hard for beginners to wrap their heads around and it's just going to be free performance for everyone no matter what your skill level is so I'm incredibly excited for when this actually releases into the actual stable version of react but for now you can use it in the release candidate version there may be some bugs and performance problems but since Facebook has been using this for the last couple years on facebook.com you can guess that most likely it's going to work on your site because it's probably smaller with less features than Facebook now this is just one of the many amazing features coming to react in version 19 if you want to learn all about every single react 19 feature I have a full video covering every single one of them I'll link that on the screen for you and also if you want to make sure that you master and stay up to date with react I highly recommend checking out my react simplified course it'll be linked in the description down below this course covers everything you need to know about react and I constantly keep it up toate with the latest react features so as soon as these features are stable in react you can guarantee that they're going to be in my course and it's going to be a completely free update for you just like every other update to my course so again if you want to master react and stay up toate with everything I highly recommend checking out that course it'll be linked down in the description below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 45,974

Keywords: webdevsimplified, react compiler, react 19 changes, react 19 compiler, react usecallback, react vs svelte, react usememo, react.memo, react memo, reactjs, reactjs 19

Id: bMTauDvGu9Y

Length: 11min 18sec (678 seconds)

Published: Tue May 28 2024