This React Compiler is the GOAT!

Key Takeaways

so introducing the new react compiler which has been recently introduced in react conference 2024 and is currently only available on the react 19 or specifically the react 19 beta so what's a compiler exactly I mean as per Wikipedia here in Computing a compiler is a computer program that actually translates computer code reading in one programming language which we call The Source language into another language which we call in this case the target language so as simple as that it just converts highle programming code into a lowle programming code I mean you can think of it something like this where it's smooth awesome and we all love it for instance if you take for example this simple C++ code in here which all it does just prints out hello word like original stuff and if you put it through a compiler it's actually basically what it's going to output for you you're going to get this assembly code in here and this simple assembly code in here is only understood by like the CPU or just very low components of a computer that could actually run that code without doing this particular step the code won't be able to run so in simple terms a compiler is simply for convering high level trash code in here into a very lowlevel optimized code now what about the reacts compiler exactly I mean for instance if you just take this very simple component in here where have like the app in here takes the value and just renders that value in a paragraph if you put it through the new react compiler you're going to get something like this which is a little bit more complicated it adds some nuances here and there and most particularly look at the cach in and memorization that's happening and that's basically the optimization part of the new reacts compiler so let's go ahead and see that in action so if you go ahead and check out the documentation of the re compiler in here it tells you that of course this is still work in progress you can go ahead and check out the compiler working group which is a ghub discussion sort of place where all the discussion is going to take place for taking the compil to the next step and right now it's only available on the new rank react 19 beta so if you're looking to to the compiler you've got to actually upgrade to the react 19 beta and the other very important thing for the compiler to work with your code specifically is your components have to follow the rules of react so if you jump to the rules of react kind of pain in here you're going to find three most important rules in here or like three headers first that components and hooks must be pure and what you mean by a pure component in this case actually whenever you pass the same prop to the component or the same state the component should render the same thing basically like pure functions but from react components perspective of course you can't run like side effects in here you have to run them outside of the render props and state are immutable return values and arguments to hooks Areo mutable and values Areo mutable after being passed to the GSX the other one is you never can call a component functions directly and you never pass around hooks as regular values last but not least you need to make sure that you call hooks at the top level of your components you can't do it like conditionally or something you have to call hooks on the top level and hooks can only be called from react functions I mean they are very simple and I believe most of people and most of code out there like react code is going to be following the react rules anyway because that's what we've been doing for years now unless you've been just going rogue so to better understand how the compiler works and what it does exactly we can go to the reacts compiler or the reacts working group for/ The reacts compiler and G home and go to this specific discussion through introduction or introducing react compiler and if you scroll down a little bit in here you can I really highly recommend reading through this like slowly and understand exactly how it works but the main part in here actually what does the compiler do so this is actually what we care about what what what this particular compiler is going to do for us and specifically what this compiler is going to introduce into a react component anyway so most of the time the compiler is going to be doing memorization and what I mean by memorization actually three steps in here so first memorization is going to be like allum to skipping cascading rendering of components which is like for example if you have a rendering of a parent that causes many other child components in the tree to reender even though only the parent has changed this will be fixed by the compiler it will also allow you to skip inexpensive calculations from outside the reacts for example if you're calling this specific method here expensively process a really large array of objects I mean this is very expensive if you're calling inside of a component in here the compon is going to help you optimize this and memorize this function so you only be called a recall or you call this particular expensive function only when the inputs are Chang change or only when needed and another awesome part is actually memorizing dependencies to effects so something like use effect so you have any dependency inside of that one it's going to make sure that works perfectly it's going to actually prevent from infinite loop on those specific use effects so of course the initial reason here as is stated in this particular discussion that it's actually mainly focused for improving update performance so like whenever you do rendering existing components it's just going to fix that a little bit it's going to optimize that rendering it it's going to make like useless rendering Cycles kind of go away so generally just going to make react work a little bit better and a little bit more optimized so of course usually for us as devolves whenever we try to make something optimized or when we call in a function that is very expensive and we want to just make sure we call it once we call or we do something like memorization most of the time so we use a hook like use memo or the use coolback in here to create a coolback only once and recreate a coolback only when the dependencies are changed or maybe if you are want to like memoize a specific component you use the react. memo API in here so these kind of stuff so from now on using the compiler you're no longer going to need to do any of these you no longer need to do those manually specifically you no longer need to do will go ahead and call the used memo in here for expensive functions or here for your callbacks or even the react do memo in here for your own components the compiler is going to parse your code go through your code and check where is the best place to actually insert those in the most optimized way and yes it works perfectly so as I said I was going through through all of this it's very very phenomenal so what about the installation it's actually very simple straightforward so first you can use this tool in here that was created by the react team which is you can use MPX for running this to directly from mpm registry and you can just call react compiler health check which is going to actually run this tool throughout your whole code base and tell you if your current reacts components out of your code base are upgradeable or not or can be compiled using the compiler so for example you're going to get something like this successfully compiled eight out of nine and the more the number you get in here the better that means if you get in here in 100 that would be a lot better because that means 100 of your components could be compiled by the component or the compiler that means 100 of your components can be optimized and they actually providing you alongside that one an esan plugin that's actually warning you whenever you just break one of the rules of rea if there's any issues with your components where the compiler can't understand that they have an es plug in for this which I really really love it I actually to use this from now on and for actually running the actual compiler you have to use Babble for now because now they are just using Babble for the first implementation but as far as I can tell through the documentation they're telling that they going to move and actually implement this in Rust maybe which is going to make it perfect in terms of performance of course but for now in bble it works really well it pces the tree and it does perfect stuff so simply you can just go npm install Babble plug-in reacts compiler in here and you can use it whenever Babble is available basically if you're running weback vits even nextjs but you got to make sure you're using Babble for that so simply if you're using vits in here you just go ahead and install that particular plugin you put it through the configuration in here plugins react Babble and it just you know put the babble plugin react compiler in here and whatever configuration you need and you're good to go all right so it's time to go ahead and integrate the comp into one of our projects and give it a try so right now we got this simple sort of like e-commerce application in here where you can just you know add different products into your card in here you can click in here to open or view your card and I'm just putting some couple stuff in here for debuging for example this Tim stamp in here which just represents the day time stamp in here just for demo purposes and because our current application in here actually uses context and as we all know the current implementation of the reacts context is very bad so like that means whenever you're holding States in one of your pairing components to use context for example we've got products and cards and I've got this bad context. provider and I'm passing the value of like product set product cards and set card and of course all of these in here are going to be just put and passed through to Old the triler like the products list and the cards itself so that means whenever anything changes from here even though the component doesn't need to be re-rendered of course for this is for the regular context implementation everything needs to be rendered which is very bad and very not optimized at all now what we want to do is actually try to install or actually configure and integrate the react compiler into our code base in here and see if it fixes this context issue and make it optimize so right now if you go inside the product listing here just to tell you that we're using Ed context in here to access whatever being passed into the context and if you scroll down a little bit you're going to notice this time stamp I'm putting dates. now so that means we're going to get a different value every single time this component rerenders and I'm doing basically the same thing on the card drawer in here so if you go to card drawer we're using context in here just listen for card and product and if we scroll a little bit down in here I'm just doing time stamp and day. now that means whenever this card drawer is rendered we're going to get a different value every single time all right so let's go ahead and see when this we render so if you're try to go ahead and add to cart remember this is the product list whenever we add to cart nothing gets updated on the products in here particularly but the only thing is going to be updated is actually the cart so right now it has only one iPhone X but if you go ahead and try to add to card in here for example I'm going to add this Blackberry or Samsung Universe I don't know what it is but if you click add to card you're going to notice this one changes and this one changes as well so if you just you know add to card in here if you notice in here just keep your nine here um I can't scroll there but if you click on this one C this in here it just keeps changing that means we're rendering this one even though we don't need to because nothing is changing in here the only part that is actually updating is the C part and that's basically the react context issue so I cre a different brush called with react compiler in here that integrated the react compiler using the bble plugin react compiler and I created a different plugin in here I'm going to talk about this one in a second and I also went ahead and actually run MPX react compiler health check to see if my code base is good enough and how many components are compiled and it's telling me 11 components out of 11 components are compiled which makes hit super super good of course I'm not using strict mode which I highly recommend using that one all right so let's try this same thing but now with the react compiler or the react Optimizer how I like to call it so I'm going to go and add two card in here and just notice to this number specifically if it changes or not so we go ahead and click on something as C in here it doesn't change it gets added to the cards it doesn't change it doesn't change the only thing that gets updated is the card itself in here so that means there is a lot of memorization going behind the scenes and the react compilers is doing a really really great job and the new Bumble plugin in here that I just created is just simply to go ahead and take whatever code that was generated using the compiler and grab it in here as an output and just console log it to see exactly what the compiler is doing so if I look into the terminal here this is basically the output of the compiler it's adding a lot of rubbish code AS we've seen before so it basically just does a lot of memorization behind the scenes it tries to optimize your code and tries to eliminate mostly like the unnecessary renders and to better understand how the compiler works and deep dive into the compiler architecture in here I went to the react re repow St in here on gith and you can find this compiler folder so this is basically the you know the compiler source code so if you go ahead enter into the source code in here you're going to find like you know how he runs the design development guide I really you know advice was going three through those so I took this particular REO in here I cloned it locally and this is what I got so whenever access the compiler went to packages bble plug-in react compiler and this is the heart of the compiler like where everything is happening and theyve proved a really nice example in here I tried to add a couple stuff but they provided this run react compiler Babble plugin which basically a function that you give it just a source code or you know react code in here and you give it like a file name language flow or typescript you got a bunch of options in here for Babble and this will just go ahead and take whatever react code you've got and it's going to generate for you or compile the code and give you the compiled output basically so you can see you know the difference between the original code and the compiled code so I did go ahead and create a simple test in here all I did is actually created this sample code I put this as a string because I need to pass that as a string you can put it as a you know file and read the file but that's a little bit complicated just put as a simple string in here so this is a very simple component gets the value in here uh it does like oh get value now dates. now to get the timestamp and this is basically the main app components so it have like use State here for updating a counter it gets the value from the previous function in top in there then it renders the time stamp the counter and a button in here whenever we click on it we go ahead and increment the counter so this basically to tell if whenever we increment the couter in here that means this component particularly the app components is going to rerender so if it rerenders will this get value gets retriggered every single time when every single render or not and is it going to be automatically magically memorized by the react compiler so I did pass this into run bble plug-in R compiler passing the code just a simple file name in here time SC a flow and I'm just going do log out the results so we can all see it so I'm going to use PMX in here I'm going to use TS node because this one is running on typescript so I want to use the typescript version of node to actually run the typescript or test.ts and I'm going to go and click enter for this one this is will go go ahead and grab TS node for us and we should see that in a second and there you go this is the compile code of course it's going to Output a lot of jeush in here and metad data stuff but the important part is the code part in here and this is the compile code so here's in here it added a lot of Jeopardy stuff and most importantly added a lot of stuff in here into the set counter with a lot of optimization there's just react memo cast Sentinel and there's so many awesome stuff going on I know it's very hard to read this particular code so what I did it put this into you know an actual file in here so this is their original code exre in here you take a look get value out in here just normal stuff and this is the generated bloated huge Cod here that nobody could understand but I mean if it just breath through this a little bit carefully you going to understand exactly what he's doing and how basically it's optimizing your cut and most important is actually import this C runtime from the react compiler runtime in here so that's why you need to make sure you run this on react 19 and it's doing like a lot of cach in here like oh reacts memo cach Sentinel to know if this time step is going to be cached or not if it did change if the dependencies did change particularly I've got the counter in here it's doing a lot of stuff on the button click in here and it's going to like return the values for you and I went ahead and actually put the same example we did before with like value time stamp and a counter in here to see if that counter actually changes and of course I'm using the react compiler in this particular react project so whenever I click the react or counter Plus+ in here to increment the counter just keep an eye on this one if it changes or not so if we go ahead and increment this one like you see this is being incremented from counter uh three four five but this one is not being touched at all so yes is doing automatic memorization and it's doing it really well so yeah I'm very happy to see that react introduced a new compiler for optimization and love up my optimization a love performance and I'm really happy to see like reacts moving from only a library into something a little bit more like a runtime and you know making a little bit more official tooling because as we all know react never made this type of toolings especially a compiler but this time is actually doing something really cool and this compiler by the way it has been tested on like currently it's fully running on instagram.com and Facebook or meta actually runs that all the time and it actually makes it work or basically they test it through the whole infrastructure the whole product line and they found it actually improved a lot of performance so anyway guys thank you for watching hope you guys enjoyed I hope you're actually excited about the comp as I am but anyway guys see you hopefully in the next ones