From ee094926d54eef5cec54c9299842eeb822c7859b Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 17 Oct 2024 16:55:24 -0400 Subject: [PATCH] [compiler] Move React 17/18 section to its own subheading (#7230) Currently it's a little hidden, let's move it to its own subheading for more prominence --- src/content/learn/react-compiler.md | 54 +++++++++++++---------------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 5afaa4cf58..08e2e5672c 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -192,61 +192,63 @@ export default function App() { When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app. -#### New projects {/*new-projects*/} - -If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior. +### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/} -## Usage {/*installation*/} - -### Babel {/*usage-with-babel*/} +React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. -npm install babel-plugin-react-compiler@experimental +npm install react-compiler-runtime@experimental -The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. - -After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline: +You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: -```js {7} +```js {3} // babel.config.js -const ReactCompilerConfig = { /* ... */ }; +const ReactCompilerConfig = { + target: '18' // '17' | '18' | '19' +}; module.exports = function () { return { plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! - // ... + ['babel-plugin-react-compiler', ReactCompilerConfig], ], }; }; ``` -`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. +#### New projects {/*new-projects*/} -React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. +If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior. + +## Usage {/*installation*/} + +### Babel {/*usage-with-babel*/} -npm install react-compiler-runtime@experimental +npm install babel-plugin-react-compiler@experimental -You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: +The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. -```js {3} +After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline: + +```js {7} // babel.config.js -const ReactCompilerConfig = { - target: '18' // '17' | '18' | '19' -}; +const ReactCompilerConfig = { /* ... */ }; module.exports = function () { return { plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], + ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! + // ... ], }; }; ``` +`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. + ### Vite {/*usage-with-vite*/} If you use Vite, you can add the plugin to vite-plugin-react: @@ -392,12 +394,6 @@ To report issues, please first create a minimal repro on the [React Compiler Pla You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler). -### `(0 , _c) is not a function` error {/*0--_c-is-not-a-function-error*/} - -This occurs if you are not using React 19 RC and up. To fix this, [upgrade your app to React 19 RC](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) first. - -If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible. - ### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/} [React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.