From a81e41555457e82e367c914b8cc84785f4144d1d Mon Sep 17 00:00:00 2001 From: Rajat Jindal <78809406+includerajat@users.noreply.github.com> Date: Mon, 13 May 2024 17:17:37 +0530 Subject: [PATCH 01/56] Change React dependency version in
page fix (#6858) Co-authored-by: Rajat Jindal --- src/content/reference/react-dom/components/form.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index d5f656073..8f6ab00e0 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -375,8 +375,8 @@ export async function signUpNewUser(newEmail) { ```json package.json hidden { "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", + "react": "canary", + "react-dom": "canary", "react-scripts": "^5.0.0" }, "main": "/index.js", From f053b53b0501a6c9a4ec2d4de80a633e01ec2174 Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Mon, 13 May 2024 19:40:55 -0700 Subject: [PATCH 02/56] Update team.md: Jason Bonta (#6862) * Update team.md: Jason Bonta * Update src/content/community/team.md Lauren's suggestion Co-authored-by: lauren --------- Co-authored-by: lauren --- src/content/community/team.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/community/team.md b/src/content/community/team.md index 060e9c841..6004476e2 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -31,7 +31,7 @@ Current members of the React team are listed in alphabetical order below. - Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work. + Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX. From e0c667feefa809feebb0e702e3612cf91c34780d Mon Sep 17 00:00:00 2001 From: Ricky Date: Wed, 15 May 2024 13:13:36 -0400 Subject: [PATCH 03/56] Add React Compiler Docs (#6869) * Add initial skeleton * Scaffold compiler docs structure * Braindump for getting started * Add intro * tweaks * add experimental tag * flesh more out of index page * flesh out installation * add installation intro * update install instrs * add section on eslint plugin * reorg * add incremental guide * [debugging] Add section about devtools badge * [debugging] Add section about using logger * Update next.js instructions * reporting issues * [debugging] Add section on useEffect over firing * [debugging] Add section about conditional hook call * Latest updates * Remove ununsed reference pages * adding extra context for Remix --------- Co-authored-by: Sathya Gunasekaran Co-authored-by: Lauren Tan Co-authored-by: Jason Bonta --- src/content/learn/react-compiler.md | 282 ++++++++++++++++++++++++++++ src/sidebarLearn.json | 7 +- 2 files changed, 288 insertions(+), 1 deletion(-) create mode 100644 src/content/learn/react-compiler.md diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md new file mode 100644 index 000000000..5918e45bc --- /dev/null +++ b/src/content/learn/react-compiler.md @@ -0,0 +1,282 @@ +--- +title: React Compiler +--- + + +This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. + + + +These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable. + + + + +* Getting started with the compiler +* Installing the compiler and eslint plugin +* Troubleshooting + + + + +React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production. + +React Compiler requires React 19 Beta. + + +React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. + +The compiler also includes an [eslint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. The plugin runs independently of the compiler and can be used even if you aren't using the compiler in your app. We recommend all React developers to use this eslint plugin to help improve the quality of your codebase. + +### What does the compiler do? {/*what-does-the-compiler-do*/} + +The compiler understands your code at a deep level through its understanding of plain JavaScript semantics and the [Rules of React](/reference/rules). This allows it to add automatic optimizations to your code. + +You may be familiar today with manual memoization through [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). The compiler can automatically do this for you, if your code follows the [Rules of React](/reference/rules). If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code. + +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. + +### Should I try out the compiler? {/*should-i-try-out-the-compiler*/} + +Please note that the compiler is still experimental and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). + +**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better. + +## Getting Started {/*getting-started*/} + +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. + +### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/} + +#### Existing projects {/*existing-projects*/} +The compiler is designed to compile functional components and hooks that follows the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior. + +For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do by configuring the compiler to only run on specific set of directories: + +```js {3} +const ReactCompilerConfig = { + sources: (filename) => { + return filename.indexOf('src/path/to/dir') !== -1; + }, +}; +``` + +In rare cases, you can also configure the compiler to run in "opt-in" mode using the `compilationMode: "annotation"` option. This makes it so the compiler will only compile components and hooks annotated with a `"use memo"` directive. Please note that the `annotation` mode is a temporary one to aid early adopters, and that we don't intend for the `"use memo"` directive to be used for the long term. + +```js {2,7} +const ReactCompilerConfig = { + compilationMode: "annotation", +}; + +// src/app.jsx +export default function App() { + "use memo"; + // ... +} +``` + +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. + +## Installation {/*installation*/} + +### Checking compatibility {/*checking-compatibility*/} + +Prior to installing the compiler, you can first check to see if your codebase is compatible: + + +npx react-compiler-healthcheck + + +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 libaries 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. + + +npm install eslint-plugin-react-compiler + + +Then, add it to your eslint config: + +```js +module.exports = { + plugins: [ + 'eslint-plugin-react-compiler', + ], + rules: { + 'react-compiler/react-compiler': 2, + }, +} +``` + +### Usage with Babel {/*usage-with-babel*/} + + +npm install babel-plugin-react-compiler + + +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: + +```js {7} +// babel.config.js +const ReactCompilerConfig = { /* ... */ }; + +module.exports = function () { + return { + plugins: [ + ['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. + +### Usage with Vite {/*usage-with-vite*/} + +If you use Vite, you can add the plugin to vite-plugin-react: + +```js {10} +// vite.config.js +const ReactCompilerConfig = { /* ... */ }; + +export default defineConfig(() => { + return { + plugins: [ + react({ + babel: { + plugins: [ + ["babel-plugin-react-compiler", ReactCompilerConfig], + ], + }, + }), + ], + // ... + }; +}); +``` + +### Usage with Next.js {/*usage-with-nextjs*/} + +Next.js allows for a slower build pipeline via Babel, which can be enabled by [configuring Babel](#usage-with-babel) by adding a `babel.config.js` file. + +### Usage with Remix {/*usage-with-remix*/} +Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: + + +npm install vite-plugin-babel + + +```js {2,14} +// vite.config.js +import babel from "vite-plugin-babel"; + +const ReactCompilerConfig = { /* ... */ }; + +export default defineConfig({ + plugins: [ + remix({ /* ... */}), + babel({ + filter: /\.[jt]sx?$/, + babelConfig: { + presets: ["@babel/preset-typescript"], // if you use TypeScript + plugins: [ + ["babel-plugin-react-compiler", ReactCompilerConfig], + ], + }, + }), + ], +}); +``` + +### Usage with Webpack {/*usage-with-webpack*/} + +You can create your own loader for React Compiler, like so: + +```js +const ReactCompilerConfig = { /* ... */ }; +const BabelPluginReactCompiler = require('babel-plugin-react-compiler'); + +function reactCompilerLoader(sourceCode, sourceMap) { + // ... + const result = transformSync(sourceCode, { + // ... + plugins: [ + [BabelPluginReactCompiler, ReactCompilerConfig], + ], + // ... + }); + + if (result === null) { + this.callback( + Error( + `Failed to transform "${options.filename}"` + ) + ); + return; + } + + this.callback( + null, + result.code + result.map === null ? undefined : result.map + ); +} + +module.exports = reactCompilerLoader; +``` + +### Usage with Expo {/*usage-with-expo*/} + +Expo uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions. + +### Usage with React Native (Metro) {/*usage-with-react-native-metro*/} + +React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions. + +## Troubleshooting {/*troubleshooting*/} + +### Reporting Issues {/*reporting-issues*/} + +To report issues, please first create a minimal repro on the [React Compiler Playground](https://0xeac7-forget.vercel.app/) and include it in your bug report. + +You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo. + +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). + +### Common Issues {/*common-issues*/} + +#### `(0 , _c) is not a function` error {/*0--_c-is-not-a-function-error*/} + +This occurs during JavaScript module evaluation when you are not using React 19 Beta and up. To fix this, [upgrade your app to React 19 Beta](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) first. + +### Debugging {/*debugging*/} + +#### Checking if components have been optimized {/*checking-if-components-have-been-optimized*/} +##### React DevTools {/*react-devtools*/} + +React Devtools (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. + +##### Other issues {/*other-issues*/} + +Please see https://github.com/reactwg/react-compiler/discussions/7. \ No newline at end of file diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 02806dc0c..335fc3556 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -43,6 +43,11 @@ { "title": "React Developer Tools", "path": "/learn/react-developer-tools" + }, + { + "title": "React Compiler", + "path": "/learn/react-compiler", + "canary": true } ] }, @@ -194,7 +199,7 @@ }, { "title": "Removing Effect Dependencies", - "path": "/learn/removing-effect-dependencies" + "path": "/learn/removing-effect-dependencies" }, { "title": "Reusing Logic with Custom Hooks", From fa19b7fc83464ba1062857bf919b16d8edf9199a Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Wed, 15 May 2024 11:26:59 -0700 Subject: [PATCH 04/56] compiler playground link --- src/content/learn/react-compiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 5918e45bc..686e9d75b 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -258,7 +258,7 @@ React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-wit ### Reporting Issues {/*reporting-issues*/} -To report issues, please first create a minimal repro on the [React Compiler Playground](https://0xeac7-forget.vercel.app/) and include it in your bug report. +To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo. @@ -279,4 +279,4 @@ React Devtools (v5.0+) has built-in support for React Compiler and will display ##### Other issues {/*other-issues*/} -Please see https://github.com/reactwg/react-compiler/discussions/7. \ No newline at end of file +Please see https://github.com/reactwg/react-compiler/discussions/7. From 8d69e6ebf9a89114c8cafc78b4464a74a384aa33 Mon Sep 17 00:00:00 2001 From: Shrey Sudhir Date: Fri, 17 May 2024 02:37:45 +1000 Subject: [PATCH 05/56] Clearer rule severity for React Compiler eslint plugin (#6870) Using "off", "warn", "error" has been supported for many years now - I think this helps improve the readability :) I completely forgot what rule: 2 meant - had to find it at https://eslint.org/docs/latest/use/configure/rules --- src/content/learn/react-compiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 686e9d75b..9c698db78 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -121,7 +121,7 @@ module.exports = { 'eslint-plugin-react-compiler', ], rules: { - 'react-compiler/react-compiler': 2, + 'react-compiler/react-compiler': "error", }, } ``` From 4e3d63a923ca5608561766e1f9526e31eeabdc24 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Fri, 17 May 2024 09:19:46 +0300 Subject: [PATCH 06/56] Fix typos in React Compiler guide (#6875) --- src/content/learn/react-compiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 9c698db78..1a6aaccb7 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -49,9 +49,9 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro ### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/} #### Existing projects {/*existing-projects*/} -The compiler is designed to compile functional components and hooks that follows the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior. +The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior. -For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do by configuring the compiler to only run on specific set of directories: +For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories: ```js {3} const ReactCompilerConfig = { From 3a46a6e435ac90054fc2cb1b3c7ee2dcf504645f Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 17 May 2024 14:34:43 +0200 Subject: [PATCH 07/56] Update instructions for setting up the React Compiler in Next.js (#6877) --- src/content/learn/react-compiler.md | 31 ++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 1a6aaccb7..378756f29 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -178,7 +178,36 @@ export default defineConfig(() => { ### Usage with Next.js {/*usage-with-nextjs*/} -Next.js allows for a slower build pipeline via Babel, which can be enabled by [configuring Babel](#usage-with-babel) by adding a `babel.config.js` file. +Next.js has an experimental configuration to enable the React Compiler. It automatically ensures Babel is set up with `babel-plugin-react-compiler`. + +- Install Next.js canary, which uses React 19 Release Candidate +- Install `babel-plugin-react-compiler` + + +npm install next@canary babel-plugin-react-compiler + + +Then configure the experimental option in `next.config.js`: + +```js {4,5,6} +// next.config.js +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + reactCompiler: true, + }, +}; + +export default nextConfig; +``` + +Using the experimental option ensures support for the React Compiler in: + +- App Router +- Pages Router +- Webpack (default) +- Turbopack (opt-in through `--turbo`) + ### Usage with Remix {/*usage-with-remix*/} Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: From 70a7b64e8068ad7b8fd9073a7b565e61b60ac435 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 17 May 2024 15:10:25 +0200 Subject: [PATCH 08/56] Update export of next.config.js (#6878) --- src/content/learn/react-compiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 378756f29..23c7f86a3 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -198,7 +198,7 @@ const nextConfig = { }, }; -export default nextConfig; +module.exports = nextConfig; ``` Using the experimental option ensures support for the React Compiler in: From ee068ace26603117e2f7924f8cbfcd9a15f8acdc Mon Sep 17 00:00:00 2001 From: Kid Max <41998473+officialkidmax@users.noreply.github.com> Date: Sun, 19 May 2024 07:13:41 +0600 Subject: [PATCH 09/56] Update separating-events-from-effects.md (#6880) Removed ; as it's unnecessary in jsx component --- src/content/learn/separating-events-from-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index ac65d2b60..21276c287 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -44,7 +44,7 @@ function ChatRoom({ roomId }) { return ( <> setMessage(e.target.value)} /> - ; + ); } From 8bb3eb3c44f6691ef7d496c8d330c673cca84122 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 19 May 2024 10:56:42 +0900 Subject: [PATCH 10/56] Fix typo (spreadsheet => stylesheet) (#6750) --- src/content/reference/react-dom/components/link.md | 4 ++-- src/content/reference/react-dom/components/style.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index c3331d94c..9172a66e7 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -44,12 +44,12 @@ To link to external resources such as stylesheets, fonts, and icons, or to annot These props apply when `rel="stylesheet"`: * `precedence`: a string. Tells React where to rank the `` DOM node relative to others in the document ``, which determines which stylesheet can override the other. Its value can be (in order of precedence) `"reset"`, `"low"`, `"medium"`, `"high"`. Stylesheets with the same precedence go together whether they are `` or inline `