React Compiler: In-Depth Beyond React Conf 2024

Is the React Compiler the most advanced frontend compiler? Let's dig in and see just what it's doing to our code!

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
00:26 Simple Compiler Examples
03:53 Getting Under The Hood
06:36 This is a COMPILER
07:23 Is This Too Far?
08:57 Removing useMemo/useCallback
09:25 Safe Fallback
11:23 Fixing useEffect?
12:59 Key Takeaways
14:20 Outroduction

Logo by @sawaratsuki1004

[cooldude]

Thanks for making high quality indepth videos! I know this kind of content takes a lot of time.

[ISKLEMMI]

Thanks for the video!
I'm really glad to see 'React Forget' coming close to a usable state.
React's use of stateful render functions for its components (vs Solid's constructor functions) makes the framework inherently less performant, but kudos to the folks on the React team, who are obviously making a monumental effort to close that gap. Being able to write less crazy workaround code is going to be a real boon.

[riddixdan]

oh god, I can already imagine so much of our code breaking because we do some dumb usememos where we want to recompute the value only when one of the 2 values changes.

[karolbielen]

All that knowledge about memoization, dependency arrays and reconciliation I've gathered over the years is now becoming obsolete.

[incarnateTheGreat]

Lol Mobx getting the shaft.

Thanks for the video and, specifically, the compiled explanations. I'm glad the React team has done their due diligence by making the great leap into compiler world. Always appreciated it as a DOM library, but we all gotta change sometime.

[YasinAkimura]

This is huge!
I am somehow worried but I think the compiler is great but I also think it takes alot from beginners where you have to learn that this can't work if the ref is changing and why it's changing.
Also we need to keep in mind that there is a bunch of stuff happening in the background I'd say because react was and still is just JavaScript using all its rules but now some things get hidden so some could get a dumb down effect where they will wonder why its not working.

So we need to encourage people to still write good structured code I think this will benefit my react native projects too.
I am worried that too much caching might push the memory usage of the apps but I think it will be fine as its only for the mounted states and pointing to something is just fine.

[sealone]

Amazing! I had to use why-did-you-render for this. Hope they include some debug mode for unnecessary rendering tool.

[adityaanuragi]

9:22 if the calculation is gonna be done this way doesn't that mean it'll be computed every single time? Whereas in useMemo it's only calculated on mount. So if it was a very long computation then the app can feel much slower with the compiler rather than the just the transpiler

[mvargasmoran]

Hello Mr. Jack. 👋
I hate react so much.

[TJVanToll]

Good stuff Jack! Love the technique you’re using to highlight individual sections of code.

[Gaijin]

Glad to see react didnt forget react forget. But its definitely not the most advanced compiler, still great tho.

[devchannel]

I don't get how this compiler would be better than for example vue build tool to manage re render. It's seems more like react catching up on that front. Vue's reactivity is op out by default

[djcardwell]

unrelated but what camera are you using? has great detail on shadows AND highlights!

[monnicore]

Love all your videos, been watching for a couple years now. Your key takeaways in this video answered my concerns with MobX! Keep up the awesome work Jack !

[jpcafe]

How is it the most advanced compiler? Svelte literally exists because of the compiler, there’s no runtime in v4

[nickytonline]

Thanks for the breakdown of the React compiler Jack! 🔥

[thisweekinreact]

Nice vid.
What I'm most afraid of is if the compiler changes the semantics of a program. If it works with the compiler it should rather not be buggy without it.

Also regarding the const name optim, Babel AST has a node.evaluate() and is already able to do such optimizations where one variable can be substituted by a const in the same file. I use this on Docusaurus to extract semi-static translation strings from the codebase.

[JuanJuan-sqhu]

Incredible video! I hope you can cover the new patterns/best practices for building react19.

[xreed]

Why are we calling it a React Compiler when it would be far more accurate to call it React Transpiler (converts JavaScript to a more optimized form of JavaScript)

[StephenRayner]

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
reactCompiler: true
}
}

module.exports = nextConfig