[compiler] Rewrite React Compiler Docs #7868
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. |
| @@ -12,6 +12,12 @@ const cachedValue = useMemo(calculateValue, dependencies) | |||
|
|
|||
| </Intro> | |||
|
|
|||
| <Note> | |||
|
|
|||
| [React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically. | |||
There was a problem hiding this comment.
this is great, was just browsing the docs and surprised it wasn't there
| import { isCompilerEnabled } from 'ReactCompilerFeatureFlag'; | ||
| import { c as _c } from 'react/compiler-runtime'; | ||
|
|
||
| const MyComponent = isCompilerEnabled() |
There was a problem hiding this comment.
If that's implemented at a component level and doesn't utilize dynamic imports, can we expect a big increase in bundle size?
As effectively, we are importing double the amount of code per optimized component?
I know it won't be exactly a 2x increase, as we aren't optimizing node_modules nor normal functions, but I wonder if this would negatively impact production in a significant way.
There was a problem hiding this comment.
Yeah the number of lines per function does get doubled, but the bundle size increase isn't 1:1 with the number of lines since it depends on the compression algorithm. For us, we found that a React Native (Android) project saw an overall increase of ~10% in apk size.
There's some tradeoff math here to do, while bundle size may increase in the gating mode, you will likely see performance benefits in the test case that tradeoff against the bundle size. You'll need to run an experiment to really be sure.
Of course the gating mode is optional too. The Incremental Adoption page covers a bit more about other strategies.
We've received [feedback](https://bsky.app/profile/danabra.mov/post/3lr46ciujjs2r) that the compiler docs are difficult to understand and not prominent enough that people don't realize the compiler is a serious project and is near stable. This PR rewrites the whole compiler doc section, giving it its own category as well as a standalone reference page. Preview: https://react-dev-git-pr7868-fbopensource.vercel.app/
We've received feedback that the compiler docs are difficult to understand and not prominent enough that people don't realize the compiler is a serious project and is near stable.
This PR rewrites the whole compiler doc section, giving it its own category as well as a standalone reference page.
Preview: https://react-dev-git-pr7868-fbopensource.vercel.app/