Skip to content

Commit

Permalink
[compiler] Move React 17/18 section to its own subheading (#7230)
Browse files Browse the repository at this point in the history
Currently it's a little hidden, let's move it to its own subheading for
more prominence
  • Loading branch information
poteto authored Oct 17, 2024
1 parent 2bd6189 commit ee09492
Showing 1 changed file with 25 additions and 29 deletions.
54 changes: 25 additions & 29 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<TerminalBlock>
npm install babel-plugin-react-compiler@experimental
npm install react-compiler-runtime@experimental
</TerminalBlock>

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*/}

<TerminalBlock>
npm install react-compiler-runtime@experimental
npm install babel-plugin-react-compiler@experimental
</TerminalBlock>

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:
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit ee09492

Please sign in to comment.