From feb15a73e2d000a56a0b166d8db03cbbf6dcdb6f Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 21 Oct 2024 11:49:43 -0400 Subject: [PATCH 1/2] [compiler] Remove section on healthcheck This package will be deprecated soon. It makes adopting the compiler confusing since it can spread the misconception that you need to have all your components successfully compiled before you can use the compiler. For now let's remove this from our docs and deprecate the package on npm. We can always choose to repurpose this in the future. --- src/content/learn/react-compiler.md | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 4fc974fa94b..5413923f7cb 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -120,28 +120,6 @@ Please note that the compiler is still in Beta and has many rough edges. While i In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. -### Checking compatibility {/*checking-compatibility*/} - -Prior to installing the compiler, you can first check to see if your codebase is compatible: - - -npx react-compiler-healthcheck@beta - - -This script will: - -- Check how many components can be successfully optimized: higher is better -- Check for `` usage: having this enabled and followed means a higher chance that the [Rules of React](/reference/rules) are followed -- Check for incompatible library usage: known libraries that are incompatible with the compiler - -As an example: - - -Successfully compiled 8 out of 9 components. -StrictMode usage not found. -Found no usage of incompatible libraries. - - ### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/} React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler. From a36cd8cad2ca718faf31f88f001863e34185db9e Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 21 Oct 2024 11:57:26 -0400 Subject: [PATCH 2/2] Clarify that 100% compilation is not necessary --- src/content/learn/react-compiler.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 5413923f7cb..cc7d3192725 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -48,6 +48,10 @@ In order to optimize applications, React Compiler automatically memoizes your co The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code. + +React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase. + + If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand. @@ -143,7 +147,9 @@ module.exports = { The eslint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. + **You don't have to fix all eslint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler. + ### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}