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. |
| {`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