Optimizing React Applications: Deep Dive into the React Compiler

Hi, React Summit. My name is Victor Alencar and I'm very, very happy to be here today to be able to share a little bit about the React compiler and how we can use it to automate performance organizations in our React apps. I have prepared our agenda for today. We're going to talk about how React works, what are the current options that we have at the moment, how the compiler works, what are the rules, and how we should adopt it.

A little bit about myself is that I am a sub-engineer with more than 10 years of experience. Right now, I'm a staff engineer in a company called Chili Piper, and I'm creating content for the web. So you can find me everywhere, anywhere. It has victormalencar on the web. So if you have any questions or you want to reach out, I'll be super, super happy to help you out as well.

So let's start. If you're like me, you probably started creating web apps way back in time when the tools that we have are frameworks like Angular, which was very nice. It was a very nice differentiation from old frameworks like jQuery, where we have more state in our apps. There was this transition period where we have when the front-end experience was getting more and more business logic, which I like personally a lot, but I see a lot of problems with the current approach at a time where I was feeling that I was learning Angular, not the web defaults.

And then React came along and brought us a totally different landscape where everything was inside JavaScript, which was very nice at the moment and made a lot of sense, but still, there were some parts of this new paradigm that didn't sit well with me at all. So in the beginning, we have classes, and it was a bit convoluted, a bit complicated, as you can see, you know, to declare a simple app, you have to go for all those states. And a bit verbose, a bit counterintuitive since I personally was more into a functional style approach, having to do with classes was good, but not ideal. But then later in time, React adopted hooks, which for me, made everything click, made a lot of sense, we have a more well-defined API to control state, and it was more explicit, it was more simple to understand and create apps.

So for the first time ever, I felt that I have what it takes to create very amazing experiences like the one that I'm showing to you. For me, React was the solution that I was looking for to create my web apps in a performant way, in an easy way that I could declaratively create the interfaces that I was trying to do at the time. But if you're like me, you also run into this problem that you create your first app, you're very excited, and then you go to the dev tools, you turn on the updates, highlights, and what do you see? Your whole React app becomes basically a Christmas tree, where everywhere in your app, it's updating all the time with every effect with every change.

So to understand why this happens, first, we need to understand how React was imagined at first, and how it became to be. Basically, the way that React handles the updates in our components is we have the parent component, and every time there is an update there, you click a button, you submit the form. What happens is all the children also get an update. Basically, if you click, let's say you submit a form, and you have a lot of children, because the parents change, all the children have to change to make sure that you propagate the change across all your apps. Which makes us think that React can be some overreactive at times, which it was fine, but as you grow your application, as you try to create more complex things, you're definitely going to see that we need more tools to make our applications faster and to make sure that we update in state only when we have to. So what are the current options that we have right now for this specific case? Basically, we can look at our app here, where we have a very simple e-commerce app, and you can see here that I create this demo code, by the way, just to highlight a simple case where we could apply some optimizations with the current APIs that we have available to us right now at the moment.

So here, for example, you can see that when I click Add to cart, I'm setting a lot of state, and I can basically use here in this area, use callback to memoize the return of the functions here. So we can have the value of them basically saving cash if we run them again, we can reuse this piece of cash if it doesn't exist. Here, for example, very similar as well, we have our items and we are doing calculations with those items. And if the value doesn't change, we could reuse those values instead of computing them over and over and over. And here it's a very good opportunity for another react API post use memo here as well. If you look to the markup, if the markup doesn't change, we don't want to have to re-render them again. And in order to not re-render them again, we can also use another react API that will allow us to save this value and skip the whole render if nothing has changed. If it's a pure function, you know, and know that nothing changed, so I just want to use the value that I have already computed. Here you can use the react.memo. So combining those things together, what do we have? So if we look here, we apply the use callback function, you know, to save the callback, to memorize the callback here in this function. Then we have the memorization of the computed values with the use memo. And here in the whole component, we also wrap it up with the react.memo, which makes everything fast. Now we achieve a better state of this app where we can save computer cycles basically because we are memorizing all those values.

But, you know, now there's a lot of hanging parts. Now you have to pay attention of this array of dependencies. You have to pay attention of the references. You have to make sure that you're always updating them if something change, right? So here in the use callback, you know, you have to worry about the dependency array for the use memo is the same and the react.memo as well. There's a lot of moving parts now, which makes us think that now I have to keep this mental model where I have to track all the state references. Also, the identity references. And this is very easy to break, which it's not the experience that we all want, right? Because we want fast applications, but we also want a great developer experience that allows us to be performant, to be, like, efficient when we are creating our apps.

And if you work in a code base that's very large and, you know, over time, this becomes very fragile. So imagine this, that you're spending a lot of hours optimizing your react app, you know, placing the use memo, use callback, only to discover that, you know, you miss a component. Now your whole chain of memorization is broken. And even worse, some friend of ours or some colleague out of work could also break in without even realizing because it requires a lot of context updates. You know, you need to be very explicit when you're adding those functions and people that work in the same code base, they need to know if they're going to change something, that this can break. And if they also have to keep updating the dependencies and the references. So here is this where the compiler goes. So here is when we can leverage the compiler to do those optimizations for us and do them automatically. So let's understand how the compiler works first. So I wanted to compile the steps that we're going to go through that explain in a nutshell where the process of taking your code and creating the optimized version of it using the React compiler.

And for this, there's a bunch of steps that we can trace and see how the data flows and what the compiler is updating and how he does that. So basically, first we have an AST, which is the abstract syntax tree that we create out of your React components. Then we build a intermediate representation of the code. This part, the compiler knows that we are dealing with React code. What it does next, it used all those instructions and all those references to optimize the code that is going through the compiler and then generate this code in a final build so you can use in your application.

Here, for example, it's how the structure, basically the development experience goes. We have the ESLint together with the Babel plug-in and the compile core all working together to create the environment that allows us to go through all those steps. And I would love to go step by step and explain everything that the compiler does in a very deep and more presented way. But as it is right now, there are 44 steps of optimization, so we don't have time for that, unfortunately. But I go through the most important bits so you get that idea.

The first step is the AST exploration. Basically, what it does is the Babel plug-in, taking your code and putting them in an AST. So it gives us more information about where your line starts and where a function call starts. So it is a way to tell the compiler how the program looks like as a big object, so it can trace back the references and it can express the code in a way that a compiler can go line by line and create instructions. Second part is the most important part here, which is the lowering. When we take more instructions and we try to reduce them and build the intermediate representation code. So basically what the compiler does is convert the AST into this high-level intermediate representation that each block will consist in an instruction that we can go step by step and understand how our React app is working.

Here, for example, this is taking the AST and now converting to this intermediate representation. So we know here all the allocation of the variables, how the data flow for our application and more importantly a little bit more about how instruction step by step connects to the next one. So we can see here for example that now we can identify when a global variable is allocated, when we're calling a function, when we're destructuring values and stuff like that. To better understand every instruction in more low level, how to connect them and how to also optimize. Which is the next step is taking all this information, piping through all the transformations so we can improve our code. So here we do a lot of steps in this space.

For example, we have the dead code elimination. We have the constant propagation and we know here which type of operations is happening so we can better optimize this code for every possible path that the user can take when interacting with our application. For example, here we know if the variable is mutating or if we should store a variable. We know for sure if we should freeze the value or not. And this is very important because with each step the compiler is trying to be more accurate on how to optimize your application. So here we know for sure how all the instructions connect in a data flow. So I know for a fact and every permutation of the paths that the data can flow in the application which type of optimization that should apply.

Last but not least is generating the code. So the last step here you're going to see basically what the compiler gives to you at the end is the code fully optimized. And here's a version of our original app how it should look like after going through the compiler. Here you can see the initial function. You know we have the same add to cart button and we have the same function with the same JSX output. And in the next step side by side you can see all the optimizations that were applied to our specific case. So if we look here you can see a lot of variables with weird names. You can see also that we are now initiating the React memocache sentinel for example. And there is different colors. So this code is a bit hard to read. So what I did right now is that I separate every type of transformation that we did so you can see and better understand which types of optimizations we're going through. So here first of all we take the static values. Basically the compiler memorizes the initial state and avoiding recreating the array on every render for example. So once that we have our value it checks in the cache if the value is present and if it's present it returns this value. Avoiding all the computations and avoiding recreating those empty arrays for example in every render. Next we do the same for the functions. So here we prevent recreating like rerender unnecessary child components when we are propagating our props.

So here is the same. We are trying to see if there is a value in the cache. If there is a value in the cache we return it and if it's not in a cache then we create it. And the same basically for the JSX output. We can see that if our UI haven't changed at all if we are passing the same props in the same way with the same values we also utilize this in the cache and return from the cache if there is already an entry. If the entry is updated in the next run we also save this in the cache and now we return the new entry if it's present in the cache.

In summary we know now that we can do those optimizations basically taking everything that we before written by hand. You know like replacing the use memo, use.memo, the react.memo and a user callback all together. Now the compiler is smart enough to identify in our components where it should place those memorizations techniques and apply them for us. So the result is you can basically start to slowly you know removing those pieces of code and check if the compiler will create those optimizations for you.

Not only that the compiler is smart enough to also identify different types of optimizations that we don't have the ability to do right now or we can only do by hand. For example here is taking one of the variables that I create identified as a static variable that that doesn't change at all and in the code gen function. Putting this as a string value already inside of my UI. So here for example you could see that I have a variable called name. I have a variable called last name which is a variable that on purpose I did with data now to mutate all the time and you can see what the react compiler did and identify the piece that doesn't change at.

All within any render adding as a string and adding is available a variable where it changes in the new versions of the compiler. It became even smarter because now it tells you that this it's a doubt in pure function right like is probably a side effect is something that you don't want at all. So it's able to tell you in the compilation step now it's much easier for us to identify those little mistakes and prevent them to happen altogether.

So here if you stop to think about we have achieved something beyond feature parity we improve memorization and enhance the performance while maintaining the developments experience which is very important for us. So what is next for us next we need to know how to adopt the compiler so we can use them in our applications and the recommendation of the reacting is that you do a gradual adoption. So you don't stall it make it works make it where right and then make it better.

First step you can start right now that the dependency of the compiler is this babel plugin that will create the ST for us. Then you can edit your configuration file or in your babel config you know to add the plugin of the react compiler. It needs to be the first one so you know it changed all the transformations for you. And next the thing that I also recommend you to do is to run the health check which will give you the status update in your whole application for the components that are ready to be optimized with the compiler or is it from any library that's not compatible with the compiler at all.

So, if you ask me, that is also another thing that we have to talk about. Basically, the compiler is doing a lot of heavy lifting for us, but it's not magic, right? There is always a catch, always important things that we have to do to make it work. The compiler assumes that you're following the rules of React, which is crucial because these rules have existed for a long time. It's essential to follow React's rules to get automatic optimizations in your app.

It's recommended to keep debugging and checking your application even after compilation. If you want to skip compilation for a specific component or file, you can use annotations like 'useMemo' to instruct the compiler to skip optimization for that part. Creating a Jira ticket or a similar system can help track issues that need attention. Visual tools can assist in identifying correctly memorized components within the app for optimization.

The React compiler is not a part of React 19, it's a tool that complements React and can be used with different versions of React, such as tagging React 18. It's crucial to understand this different mental model for code optimization and generation. Using these tools can enhance current projects with quick wins in performance optimizations, making code simpler, improving developer experience, and increasing speed and performance.