You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
186
186
187
+
#### New projects {/*new-projects*/}
188
+
189
+
If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
190
+
187
191
### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
188
192
189
193
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.
190
194
191
195
<TerminalBlock>
192
-
npm install react-compiler-runtime@experimental
196
+
npm install react-compiler-runtime@beta
193
197
</TerminalBlock>
194
198
195
199
You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
@@ -209,9 +213,15 @@ module.exports = function () {
209
213
};
210
214
```
211
215
212
-
#### New projects {/*new-projects*/}
216
+
###Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
213
217
214
-
If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
218
+
React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
219
+
220
+
Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
221
+
222
+
Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
223
+
224
+
Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
215
225
216
226
### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
217
227
@@ -394,6 +404,16 @@ To report issues, please first create a minimal repro on the [React Compiler Pla
394
404
395
405
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).
396
406
407
+
### What does the compiler assume? {/*what-does-the-compiler-assume*/}
408
+
409
+
React Compiler assumes that your code:
410
+
411
+
1. Is valid, semantic JavaScript.
412
+
2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`.
413
+
3. Follows the [Rules of React](https://react.dev/reference/rules).
414
+
415
+
React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
416
+
397
417
### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
398
418
399
419
[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.
0 commit comments