React Compiler v1 #8065
React Compiler v1 #8065
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Five Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
| ### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/} | ||
|
|
||
| Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details. | ||
| Please see the [stable release blog post](/blog/2025/10/08/react-compiler-1) for details. |
There was a problem hiding this comment.
I love that we’re updating our old blog posts to help developers avoid outdated information.
That said it’s really important to not break links, and not rewrite history. So here and in other places, let’s keep the existing text and add an update about the stable release. Strikethrough text for what was there works too, but let’s not rewrite so aggressively.
There was a problem hiding this comment.
@josephsavona I added a redirect in vercel.json, and I also added a deadlink checking script a while back to make sure we have no deadlinks. We did the same thing (rewrite the RC post) for React 19 RC to React 19. I can do a separate one instead but thought we'd keep the tradition
| ### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/} | ||
|
|
||
| Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details. | ||
| Please see the [stable release blog post](/blog/2025/10/08/react-compiler-1) for details. |
| {`yarn add --dev --exact babel-plugin-react-compiler@latest`} | ||
| </TerminalBlock> | ||
|
|
||
| As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code. |
There was a problem hiding this comment.
We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code.
I am confident we can pull this off based on @mofeiZ's explorations, but i think we can leave this off for now. Let's talk about it when it's ready. It's easy for developers to misread this and think these optimizations are ready now (think about how everyone thought that 19 included the compiler even though we didn't say that)
| In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. | ||
|
|
||
| If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `1.0.0`) rather than a SemVer range (eg `^1.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. | ||
|
|
There was a problem hiding this comment.
should we include an answer to "can i delete my useMemo/useCallback" here? the answer can be in the docs, but it might be worth linking to it from the blog post to get more attention to how the compiler treats these hooks now
Updates our blog posts and docs for React Compiler 1.0
Updates our blog posts and docs for React Compiler 1.0