React Compiler - The Missing Piece for Optimizing React Applications

Hello, everyone. Today, I'm going to talk about React compiler. And first of all, thank you very much for inviting me to talk in this event, the React Debugging, and I'm really excited to share my knowledge on React compiler with you.

Before we get started, a bit of introduction about myself. I've been working with code for nearly 20 years now. I've been spanning across multiple technologies and stack. I'm a YouTuber teaching, you know, as a personal educator on my YouTube channel called TypeScript and a technology blogger. I have my own startup that I recently called Creowaste and also I'm running an open source community called React Live for React developers.

Now, to get started with the discussion and the talk today, this is what I'm planning to cover. So, React compiler is all about the optimizations. As we talk about optimizations, let's understand what kind of optimizations are in place today with React and React compiler got introduced along with React 19. So, we'll also come to know about a bit about React 19 and then we'll dive into the understanding of compiler in general, then React compiler architecture, then we'll see a little bit of code projects like React compiler in action. We'll get some deep dive understanding what exactly compiler doing in the background, and we'll end with a few tips and tricks with you. Alright.

So, get started with the optimizations. Before we even think about compiler, I'm sure if you are a React developer, you know some of this optimization in place. So, you know there is something called keys, right? So, when you are iterating through the list of items in React, there is something called key so that your virtual DOM can make efficient judgment of what to update when a list item gets updated. You can lazily load your images. You can lazily load your components. You can do a lot of performance optimization using memoization technique, whether hooks like useMemo or useCallback so that your components doesn't re-render until and unless there is a dependency that gets changed. So, all these kinds of optimizations are already placed in React, and those are there since the beginning till 18.x.

Now, with React 19, there is a React compiler that is also coming into picture, and that is going to do further more optimization, but why? We already have this kind of optimizations. What do you believe? You know, the Spider-Man's uncle, Uncle Ben, once said that with great power comes great responsibility. And we developers, when we get this power, get all these tools that React already gave us, we got to be a little more responsible, isn't it? So, over the last few years, if you look into the code, especially I look into a lot of code in the open source projects, there are huge, huge number of useMemo, useCallback, you know, those kind of code have come up. Are those code written with every optimization side effect into account? May not be all. It is because we developers are a bit ambitious, and we like to write code where we feel like things are going to work. But we also need to take a call, like whether there are any kind of side effect or negative effect, because we are using those tools that are given to us. That's where, instead of giving this power to the developer, how about keeping the power with the library itself? I think that's where React played very smart in introducing React Compiler. We are going to see that how React Compiler is going to take away all these memoization techniques that is given to React, and then doing the stuff by itself. Does it mean that we won't be using, you know, React Memo, useMemo, useCallback, those techniques at all when the compiler into picture? Mostly we don't have to, but if your existing code is having those performance optimizations already, and on top of that you are going to use React Compiler, you can still use it. The compiler is just going to ignore them.

All right? So before we talk about React Compiler more in depth, I think we need to talk about React 19 a bit, because the React 19, React Compiler is kind of coming together to all the developers. So with React 19, a bunch of features are getting introduced. One is server components, the component that can run on the server. When you have the server actions, there are a lot of things with the web components right now. Making the web components work with React itself is a little bit tedious, but there is a promise that web components will work very seamless with React. The document metadata for the SEO purpose, there are enhanced hooks, especially for form handling. There are a lot. The handling of references are going to get improved, and one level of optimization for the asset loading is already coming in React 19. But along with all this, there is an introduction of React Compiler, and that's what we're going to talk about today. In case you are interested in knowing about React 19 features more in depth, you can check out this QR code, and it will land into a link where you can actually learn more about React 19 and all the features that basically you need.

Now to move on, as we're talking about React Compiler, I think it makes sense to understand what exactly a compiler does. So in computer engineering, when you talk about compiler, it means that it takes a source code as an input, and then it performs varieties of passes, varieties of things on top of it. And at the end of it, it generates something like a machine code that your machine or the computer understands. Our computer doesn't understand const count equals to zero straight away. It has to be compiled, and there should be a machine code generated, which our computer will finally understand.

So if I take through these steps at a very high level again, in the computer science of engineering, how the compiler works, it takes your high-level programming language as an input, and then it gets to something called lexical analyzer. What it does basically, it tokenize your source code. So if you have const count equals to 10, it's going to create token like const count equals sign and the value 10. Then pass it to the syntax analyzer, which is going to create something called an abstract syntax tree or AST. We would have heard about this term if you're from computer science and engineering background. Now this AST helps us in being with the structure or the grammar of the programming language. That's where the semantic analyzer, the next step, does the validation that is my AST in the right format, so that I can say this line of code that is written by the developer is going to be compiled. If not, the compiler is going to throw an error. That's when you get a compilation error. So that happens in the semantic analyzer step.

After that, it generates an intermediate code, which is called an IR code at the intermediate code generator stage. And finally, it will be given to something called a code optimizer, where more optimizations will be in place. The dead code will be eliminated and all these cases. And finally, finally, the machine code would be generated. And that is what your machine would be capable of executing. So this is how the compiler works at a high level. Now when it comes to React compiler, a similar kind of paradigm is in place. So let me show you that as well. This particular diagram that you are seeing on the screen is trying to demonstrate that what is there inside React compiler. Left side you are seeing React 19 project. It is because React compiler is recommended to use with React 19. We will also see how can we make it work with the previous version of React towards the end. But let's consider that you have a React 19 project, and now you have to make React compiler work with it. Then what is there inside React compiler? There are three pieces that comes into picture. One is the Babel plugin.

Now if you're into web development, I'm sure that you know Babel really well, the transpiler. Then there is something called ESLint. You also know ESLint because that's what we use for our code validation, the static code analyzer, analyzation. And then when you write the code, it can tell OK, we are breaking this particular rule, and it reports error. We can take care of those error and et cetera. And then there is the logic written by the compiler team, the compiler core team, which is called compiler core logic.

So what is the use of each of this? The Babel plugin can identify which part of your React 19 project should be optimized, which part should not be optimized. So it means that there can be some configurations that you as a developer can do for your project where you can say, whether take my entire project, consider my entire project for optimization or consider only a part of it for the optimization. Once the Babel plugin comes to know about this, then what it does, it creates that abstract syntax tree, the AST that we spoke about. But in this case, the node of each of this, in this case, the node of the AST is going to be components of the hooks, because that is what we are going to optimize.

Now once the AST is in place, what will also be there is the ESLint plugin will be there to check that all the rules of React are in place or not. If you are from React background, you know that there are certain rules we go by. For example, if you're using a hook, you know like where and how to use the hook. You cannot use the hook in a conditional statement. You cannot use the hook inside the for loop. So if those things come across, then React compiler is going to throw the error straight away saying that this is not compatible for me to optimize any further. And both this Babel plugin and the ESLint plugin will use the compiler code, that particular code to optimize things. Once AST gets created, the optimizations and the passes, the dead code removal, all these things will be applied. Just like that we have seen with other compilation process, the generic compilation process a while ago. And at the end of it, what will be generated from this AST is the plain old JavaScript code. Ultimately, on your browser, what runs? JavaScript, HTML, CSS. So once you write a React component, your browser doesn't really run the React component directly, isn't it? It has to be transpiled into JavaScript code. That's what your browser understand. So in this case also, after all the optimization technique, the final thing that we'll get is the plain old JavaScript. I'm going to show you that as well, how React compiler is going to impact on a particular component to create a JavaScript code. So this is how the things are happening. This is how the React compiler works at a high level. Now we want to see a project where I'm going to show without React compiler, how that project is behaving and with React compiler in picture, what kind of changes that we can see. So let me explain what is this project about and what is the structure at a very high level. Very simple project.

Let's assume that we have a product page. I'm going to show that page in a while. And that product page having a heading and the list of products that it shows. So I have this product page component you can see over here. It takes two props. One is as heading and the second prop is the list of products, which is an array.

After that, to compose the UI, it uses three more components. One is the heading itself, where it just passed the heading and from the products compute the total number of products and pass these two things as props to this heading. Then the product page passes the products array to another component called product list, which just iterates through and renders the list of products. And there is another component called featured products where we can compute the featured products from this products and pass it to it for rendering only the featured products. Very simple hierarchy we are talking about.

So as we're talking about this, let me just pull the browser over here. This is the app that I was talking about. This is the heading and then this is the product list component and this is the featured list component. Very good. Now, if I look into the code, I'm just going to open my VSCode over here. The hierarchy that I have explained already. This is the top level app.js inside that this is a product page and the product page is basically having headings product list and the featured products and those props I'm passing appropriately. Now what I'm going to do, I'm going to bring this guy just beside my VSCode so that you can see some of these things in effect as and when I am doing stuff.

OK, so take a look. Just reducing this a bit. Yeah. So if I go to app.js file now, this product page over here, it gets this props call heading, which is like this food products. And along with that, it also takes up products, right? That is what it is actually this product page actually rendering. Now if I go to each of this component inside, be it product, be it heading or be it product list or the featured products, you would notice that I am rendering something called a dead dot now, which means it's a current timestamp. OK, so it means this page not only showing the product list, but along with that, it is showing the current timestamp. OK, why I'm showing this one? Because once this page renders, this timestamp also renders and will see the change in the time immediately. So now let me do the change. What I'm going to do over here. The first thing is like this particular heading, the food products.

The product is in plural products. I am going to change by removing this S over here. Just notice this number. This is 12 12 12. OK. You see that? It all changed to 76 76 76. The timestamp changed. But did you notice that this heading props is only being used inside this heading component? It is not being used either in the product list or in the featured product. But then why unnecessarily I re-rendered this component and this component? Today, there are only three or four items we are showing. But if it is a huge list, if it is something that takes time to re-render, you will have the performance lag, isn't it?

So this is a typical problem because in React, if the parent is re-rendering, it is going to re-render its all child components as well. Similarly, if I am changing maybe this taco from here, this taco to 234 over here, you will see the change again. Everything has changed. Right. The taco to 234 has changed and everything got changed. So this actually might create a problem. You know, with react memo and all these things into picture, you can still solve the problem in a way that this particular product list component you can memoize with react.memo, maybe the featured list, the creation of the featured list at a you can use used memo or use callback to make sure that until and unless the props to that particular component gets changed, you won't re-render that component. But the classic case of changing this heading from the top, changing all this re-rendering all this component downstream is really creating a problem. I think this is where the React compiler kicks in and it's going to help a lot.

So this is what we're going to do now. We are going to bring React compiler into this particular application and going to show you like how it is going to help us. All right. So for that, I'm just going to knock this out and going to open the terminal so that I can show you a few stuff. I'm going to go to my documentations so that I can copy a few commands very easily. So for using React 19, for using React compiler on your React 19 project or any other project, first thing that you can do is like you can do a quick health check, like is your project in a state where you can use the React compiler or not. Now to do that health check, there is a command that we can use. The command says npx react-compiler health check at experimental. Once you run this command, it's going to tell you like all the components that you got in your application are all optimized or pre-optimized to run this React compiler on it or is there any component that is breaking the rules of React so that you cannot run it. As you are saying that, I have five components and successfully five out of five are saying they're good to go. Now the next thing that I'm going to do is like to configure those Babel plugin and the ESLint.

Now the next thing that I'm going to do is like to configure those Babel plugin and the ESLint. All right, so let's do the ESLint first. For that I'll do yarn add and do this guy is going to install this. Just take a probably a second. That's it. It is done. Now after this I'm going to open a file called .eslint.cgs and a very minimalistic configuration that I have to do. As I have installed this ESLint experimental for React compiler, this particular library, I just have to include a few stuff. For example, if I go to plugin section of it, I'm going to incorporate this particular ESLint plugin React compiler, the one I just now installed. And along with that, I'm going to establish a rules. There are a bunch of rules. I'm going to establish one new rule for this particular React compiler. That's it. This is it for the ESLint.

Now the last thing that is pending is to install Babel and the similar way because Babel is another part. That's what we learned. So we'll do yarn add and then I'm going to install Babel. This is also going to be installed pretty soon and after it is installed, I have to do a very minimalistic configuration. For that, I'll be going to Control-P, y.config.js. Now here one thing to tell is like my React application uses React 19 on Bit. If you're using Next.js, there will be Next.js specific configuration for this step that we can get it from react.dev documentation website. But as I'm using Bit, I can actually do the configuration pretty well. So using the Bit documentation. So for that, the steps are pretty simple. I have to create a compiler config. For now, the compiler config will be empty. It is not going to have anything, but we're going to add a few things later when you're going to talk about the tips and tricks. And then finally, this particular React will have a few configurations. That's what I'm going to copy straight away from the documentation and then going to explain to you. So check what it has.

The Babel plugin just now I installed. I'm just defining that plugin along with this React compiler config. That's it. There is no other configuration. That is the only Babel plugin configuration I have.

We are not going to do any more configurations or any more stuff, right? So let's go back to our screen. Let's go back and refresh this one for the last time. So let's go to app.js file. Let me reduce this again so that I can see this. And now this is product, right? And I'm going to change to products. And again, look back all this timestamp and let's see whether this timestamp changes now or not, whether the re-rendering of the entire component is happening or not. You saw that? It was 31, 31. I'll remove again. It is still 31. It's not changing. That means that it is doing an in-place update of the part that we are updating inside the component. The child components are not re-rendering and all the re-rendering, unnecessary re-rendering that was happening like before is really not there. So it's just cool stuff and this is what the React compiler is promising and to come up with. You are not using any kind of memorizations by yourself, rather you are handing it over to some configurations that React promises to take care and the React compiler is taking care of all these configurations for you.

Here one thing to mention, as you have seen it, I think this is the right time to mention that I had to install and configure everything about React compiler separately than my React 19 project. So though React compiler announcements and all these things are coming along with React 19 and it is recommended to use with a React 19 project, but it is not bundled within React. It is a built-in tool that you need to configure, you need to opt-in if you are looking forward to use React 19 and React compiler together. So one more thing I want to quickly show you is if I go to the dev tools, I'll just make it a little bigger for you and then I have the React dev tools over here somewhere. So once the component is optimized by React compiler, you can also see that which component has been optimized by React compiler using these things. This has got added with React dev tools version 5, I guess, that you will have this badge called memo. That means this particular component is optimized by React compiler. In my case, I have done it as a project configuration level, so all the components got optimized. But you can take a call, you know, that which particular component that you want to optimize versus which particular component you can leave out. We are going to see that in a moment.

We are going to see that in a moment.

So I'll go back to my presentation.

So now, next couple of minutes, I want to take you through a deep dive of what exactly the React compiler is doing with the code. And for understanding of that, we have something called React compiler playground, which is a pretty efficient thing that you can use for understanding what exactly happening underneath.

So let's go to the compiler playground. This is React compiler playground. Here the left side is a React component. And here I have taken the heading component, for example, the heading component, which shows the heading plus total number of products beside it. And the right side is the generated code, the optimized code that React compiler generates for this particular React component.

If you take a bit deeper look into this code, this is a plain old JavaScript. And let me quickly take you through what exactly it is doing. So here, the t0 is nothing but the props that you are passing to this component, which is like heading and the total products. So the t0, we destructure and get heading and the total products. Very simple. The plain old object destructuring.

Then it has created something called underscore C3. What is it? The underscore C3 is an internal React hook, which helps us to create a memoized array. That means it will create an array and array will have three elements over here. That's why we are passing three. And each element of that particular array will have cachable elements, something that you can cache. OK, that's how you get the performance enhancement. Now why this three? The question might come. So it means that we are trying to optimize three things, or we are probably trying to cache three things. That's why it is three. But why three? It is because we have two props, isn't it? One is heading. Another is total products. And then based on heading or total products, what will change? It will change what exactly this particular component produces, which is the JSX. If the heading change, this JSX change. If the total products change, this JSX change. But if both heading or total products don't change, then this JSX never change.

So there is an opportunity to cache this JSX as well. So there are three things to cache. That's why it is three. Now this dollar will have three elements, dollar of 0, 1, 2. In all these elements we can keep the cachable entries.

Now here it is checking whether heading or total products, any of these things are changing or not. In case there is a change, here you have to see, in case there is a change, then what we are doing? We are computing the fresh JSX part with the heading and the total products. And then we are doing dollar zero equals to heading this particular array, dollar one equals to total products. We are basically caching it, keeping it. Dollar two is this computed JSX. If it is not changing, then just return dollar two, which is nothing but the computed JSX. So it means if your heading and total products are not changing, you are always returning what was previously computed. That's all it is doing. Very simple, memoized block, that block to compute something based on the dependencies that you are passing it to. Isn't it?

Now, the last few things that I want to call out again about this one is a bit, some tips and tricks that you have to know. For example, in the code, I have showed you that I am able to configure this React compiler for the entire project, right? As I'm doing in the vid.config.js file. But you always have an opportunity for not doing this for the entire project. You can skip it, you know? So for that, don't do this, you know, and then we're doing this, you have to pass a few more configurations. This is where this React compiler config will come into picture. What you can do instead of keeping it empty, you can now set a compilation mode, something like this.

You can say compilation mode is annotation. And after that, the component that you are interested to optimize, for example, this heading.jsx, over here at the top of your component where the component starts, you can do something like useMemo. So it means your compiler now will identify what are those components that is having this useMemo directive, and lets optimize only those components because I have selected for the annotation mode. In this case, only heading component will be optimized. Most of the components, product list, you know, feature product is not going to be optimized. There is also another directive called useNomemo. You write it like this. This is to say that, this is to say that, you know, don't optimize this particular component at all. Even though I have annotated, but don't optimize.

Even though I have annotated, but don't optimize. You will be using this mostly when you found some kind of issue with this component, maybe breaking the rules of React for the time being. For the time being, you do useNomemo, and then you can actually get back to useMemo whenever it is actually functioning and working to optimize this one. So whoever looking for gradual optimizations, I think for them, the annotation mode works really well. And you can actually optimize component by components. So I hope that makes sense to you.

Now again, I'll go back to my presentation. Now the question comes that React compiler works well with React 19. Of course, we have seen the demonstration as well. And it is recommended. But can I use it with React 18? Because React 19 is still in RC as of giving this talk. And there are projects running on React 17, React 18. Can you use React compiler? The answer is yes. When I started investigating React compiler, you know, in the beginning, the support was not very straightforward. But now the support is pretty straightforward. So if you have a React 17 or the React 18 project, you have to just install this dependency called React compiler runtime at beta, either with npm or yarn or pnpm, whatever you like. And then the Babel config, whatever we have seen just now, I have showed you the React compiler config, where I was using the annotations and all of the configurations, or I was keeping it blank. You can use your React target. You can use it as 18, or for 17 or 18, you know, this version that you can give. The rest of it remains exactly the same. So if you do this, then it is going to work with your React 18 and the React 17 codebase as well. But it is always recommended that you use it with React 19. So with that, I guess I am done with what I wanted to kind of convey about React compiler. It's a very, very exciting thing that is coming. And you should be experimenting out, especially a few things is like the React compiler playground Take any component of your choice, put it there and see how React compiler is compiling and creating that output JavaScript. You will be amazed to see like how exactly it is performing.

If you'd like to connect with me, this is the QR code that you can scan and you can connect with me. Also, you can check out my YouTube channel and if it looks good, you can subscribe to that. I would like to thank everyone for watching this, especially React Berlin, the organizing committee and everyone for inviting me for this talk. Thank you very much.