React Compiler

[00:00:00]
>> Brian Holt: We got one more kinda cool thing. This one, luckily, doesn't actually require, I don't think, any code for you to write. I'm gonna talk about the React Compiler, which I haven't really been able to talk about, but they've been talking about for a long time. So React Compiler is basically going to be free optimization for your code.

[00:00:19]
So in theory, it should make your code either about the same, to faster. So it should be no worse, and it could be a lot faster. There are two hooks I didn't show you, and I did that intentionally, one called useMemo and useCallback. This allows you just tell a component, it's like, you are too slow to render, please don't render unless I tell you to render.

[00:00:43]
That seems like a good thing, is why don't I tell that to all of my components that I know don't need to re-render themselves, right? What's a good example of, our header, no, it does change, right, cuz of this, our cart.length. Pizza changes, model changes. We have some sort of dynamism in all of our components, don't we?

[00:01:05]
>> Brian Holt: Yeah, so we wouldn't really be able to do too much with it.
>> Brian Holt: Imagine you had a table that you rendered that had 5,000 things in it, and you really didn't want it to re-render unless it had something to re-render. It's not cheap to re-render that component.

[00:01:28]
You could use something called useMemo to say, this component, please, don't re-render it unless I tell you to. UseCallback is another variation of that.
>> Brian Holt: So if you have performance problems, one, wait until you have a real performance problem first, then you can use useMemo and useCallback, right?

[00:01:51]
That's my strong advice for you, because once you introduce useMemo and useCallback, your code gets harder to reason about. Because something will not update when you expect it to and you're like, why is this not updating, right? You'll change some state or something like that, and it won't update the view and you'll be like, why is this, right?

[00:02:08]
This has happened to me, this is why I'm telling you about it. So please don't use it until you actually are solving a real problem, because otherwise, you're making your life harder for no reason. React is really fast, it's really good at making UIs, and they're just making it faster all the time.

[00:02:24]
So generally, you can just trust it to be fast.
>> Brian Holt: Okay, so why are we talking about this now with React Compiler? Well, React Compiler is actually gonna go look at your code and say, this thing can't change in these circumstances. So I am going to prematurely optimize this for them, and then it'll just handle all that stuff for you.

[00:02:46]
So it's gonna do some static analysis, your code is like, this particular branch of code. This isn't gonna update, I'm just gonna say this never updates, and then your code just gets faster. So it's using basically useMemo and useCallback, useMemo particularly for you. So I'm very for this stack analysis and all that kinda stuff, and they're saying, this code branch can't update, I think that's awesome.

[00:03:10]
This used to be known as React Forget. So if you ever hear React Forget reference anywhere, they're talking about the React Compiler. If, for whatever reason, it's trying to do something and you don't want it to, for whatever reason, you can go at the top of the page and you say, use no memo, and it will not ever optimize that.

[00:03:28]
They request that if you have to do that, to please tell them, because they wanna know why, because it shouldn't, right? You should never have to use that. They're saying that eventually, they're going to eliminate all cases of when that should happen. So, let's do something kinda fun.

[00:03:42]
You can run this in your own codebases today, it only will mine Bitcoin for me, I'm just kidding. This is from the React team to see, would this be useful to my codebase? So we're just gonna run it in ours, npx react-compiler-healthcheck@beta. It might ask you, yeah, do you wanna install this?

[00:04:02]
You gonna say yes, and it's gonna run your code base and it says, hey, I was able to affect 12 of your 13 components. Happily found strict mode, and it says, found no use of incompatible libraries. So it turns out our code base is a good use case for React Compiler.

[00:04:21]
So let's go put it in. What they have said officially from the React core team is, this is safe to put in today on any code base, it should not cause problems. So for example, Bluesky, which is the new social app. They went and put it on the Bluesky app, which is all open source, right, which is a massive React app.

[00:04:44]
And they run it on Bluesky, which is pretty cool, and it's already running, obviously, on Facebook. So here's what I want you to do, I want you to say, npm install-D babel-plugin-react-compiler@beta. Again, if you're watching this in the future, you might need to check my versions here because it might have changed.

[00:05:10]
And then you gotta go ahead and throw that good old dash-dash force on there because it's gonna get real mad about versions.
>> Brian Holt: Cool, okay, so now we have the compiler in here, and we're gonna have to do some extra configuration on our Vite config. So here with React, we have to give it an object.

[00:05:37]
Babel,
>> Brian Holt: Which is an object, you have to give it plugins, which is an array. Then you have to give that another array, feel free to copy this because it's obscene, babel-plugin-react-compiler.
>> Brian Holt: We're gonna do target 19, I believe this does work technically on 18, we're gonna put in 19 cuz that's what we're on, right, React 19.

[00:06:12]
Okay, and then we're gonna say, npm run dev, okay, and then we should be able to open our app. And if everything went perfectly, you should notice nothing. The best kind of thing, we put a ton of effort and nothing happened. But let me show you what is actually happening.

[00:06:35]
Open your dev tools and open the React Core dev tools for the components one. Now see this little memo magic? This component has auto-memoized by the React Compiler. So it's actually gonna go in here and show you, it's like, I was able to memoize this for you. So the header, I'm able to memoize this, and it's able to just do a bunch of really cool stuff that way, which is pretty cool.

[00:07:02]
I think it's awesome that they're actually able to show you what actually is getting memoized by the React Compiler.
>> Brian Holt: So pretty cool stuff, they've been talking about this for a long time, I think they built it for Instagram, question mark? I'm actually not sure of what they actually built it for.

[00:07:20]
But they've been running it in production for a long time on Facebook. So it's stable enough to give a shot to today. And, yeah, any questions about that?
>> Speaker 2: And that can be used on previous versions of React, not just React 19.
>> Brian Holt: I think it's 17, 18, and 19, I think is what they said.

[00:07:41]
18, for sure, 17, you might need to go check. If you're on 17, please get on 18, I guess that's what I would say to that. I left a link in here to Lauren Tan`s talk from React Conf. Fun fact, I don't think I taught Lauren React, and I'm not going to claim that, but she did attend one of my workshops at Netflix where I taught my React workshop to a bunch of people.

[00:08:12]
So Lauren has been present during a time that I was teaching React, that is a fact that I can assert. She's very smart. So, she is now the manager of the React team. So, you should watch her talk, she's a great speaker and she talks a lot about it at React Conf this year.