From bb38630bc9c4aed40b72eaa171caf7e410a9e393 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 7 Oct 2024 19:14:43 -0400 Subject: [PATCH 01/15] Add react-compiler-runtime instructions to compiler docs (#7213) For users of React < 19, there is a new react-compiler-runtime package that can be used to provide a "polyfill" for runtime APIs needed for compiled code. This PR adds docs for that. --- src/content/learn/react-compiler.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 2920e8643..5afaa4cf5 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the 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 RC. 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. 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. @@ -226,6 +224,29 @@ module.exports = function () { `babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. +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 react-compiler-runtime@experimental + + +You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: + +```js {3} +// babel.config.js +const ReactCompilerConfig = { + target: '18' // '17' | '18' | '19' +}; + +module.exports = function () { + return { + plugins: [ + ['babel-plugin-react-compiler', ReactCompilerConfig], + ], + }; +}; +``` + ### Vite {/*usage-with-vite*/} If you use Vite, you can add the plugin to vite-plugin-react: From 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 Mon Sep 17 00:00:00 2001 From: Jake Saterlay <41985955+JakeSaterlay@users.noreply.github.com> Date: Tue, 8 Oct 2024 09:57:10 +0100 Subject: [PATCH 02/15] `useActionState` pending example (#6989) Co-authored-by: Sebastian "Sebbie" Silbermann --- src/content/reference/react/useActionState.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 6f5924e3d..52fba47e7 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -20,7 +20,7 @@ In earlier React Canary versions, this API was part of React DOM and called `use `useActionState` is a Hook that allows you to update state based on the result of a form action. ```js -const [state, formAction] = useActionState(fn, initialState, permalink?); +const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); ``` @@ -35,7 +35,7 @@ const [state, formAction] = useActionState(fn, initialState, permalink?); {/* TODO T164397693: link to actions documentation once it exists */} -Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided. +Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided. ```js import { useActionState } from "react"; @@ -71,10 +71,11 @@ If used with a Server Action, `useActionState` allows the server's response from #### Returns {/*returns*/} -`useActionState` returns an array with exactly two values: +`useActionState` returns an array with the following values: 1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action. 2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. +3. The `isPending` flag that tells you whether there is a pending Transition. #### Caveats {/*caveats*/} @@ -104,10 +105,11 @@ function MyComponent() { } ``` -`useActionState` returns an array with exactly two items: +`useActionState` returns an array with the following items: 1. The current state of the form, which is initially set to the initial state you provided, and after the form is submitted is set to the return value of the action you provided. 2. A new action that you pass to `
` as its `action` prop. +3. A pending state that you can utilise whilst your action is processing. When the form is submitted, the action function that you provided will be called. Its return value will become the new current state of the form. @@ -133,13 +135,13 @@ import { useActionState, useState } from "react"; import { addToCart } from "./actions.js"; function AddToCartForm({itemID, itemTitle}) { - const [message, formAction] = useActionState(addToCart, null); + const [message, formAction, isPending] = useActionState(addToCart, null); return (

{itemTitle}

- {message} + {isPending ? "Loading..." : message}
); } @@ -162,6 +164,10 @@ export async function addToCart(prevState, queryData) { if (itemID === "1") { return "Added to cart"; } else { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 2000); + }); return "Couldn't add to cart: the item is sold out."; } } From 2bd6189d240703990a3c7452fd4124ba48e9f0d2 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 15 Oct 2024 03:56:53 +0900 Subject: [PATCH 03/15] Capitalize "Effect" (#7211) --- src/content/reference/react/useReducer.md | 2 +- src/content/reference/react/useState.md | 2 +- src/content/reference/react/useTransition.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index cfd0fb856..ed3dc68c2 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -52,7 +52,7 @@ function MyComponent() { #### Caveats {/*caveats*/} * `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) +* The `dispatch` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) * In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored. --- diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 4aa9d5911..23db1aae5 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -85,7 +85,7 @@ function handleClick() { * React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync) -* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) +* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) * Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 5066fe637..b6dcb3c73 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -80,7 +80,7 @@ function TabContainer() { * The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as Transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as Transitions. -* The `startTransition` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) +* The `startTransition` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) * A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update. From ee094926d54eef5cec54c9299842eeb822c7859b Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 17 Oct 2024 16:55:24 -0400 Subject: [PATCH 04/15] [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 5afaa4cf5..08e2e5672 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. From 9467bc58868e66c53ca9385c8531dcf7b02178c2 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 18 Oct 2024 00:12:01 -0400 Subject: [PATCH 05/15] [compiler] Add docs for Beta (#7231) Updates our compiler docs for the latest Beta release. --- src/content/learn/react-compiler.md | 146 +++++++++------------------- 1 file changed, 48 insertions(+), 98 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 08e2e5672..4fc974fa9 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -3,7 +3,7 @@ title: React Compiler --- -This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. +This page will give you an introduction to React Compiler and how to try it out successfully. @@ -19,12 +19,28 @@ These docs are still a work in progress. More documentation is available in the -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 is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. 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). + +The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`. -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. +React Compiler is a new 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. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. + +The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta: -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. + +npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +Or, if you're using Yarn: + + +yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions. ### What does the compiler do? {/*what-does-the-compiler-do*/} @@ -94,19 +110,9 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated. -### What does the compiler assume? {/*what-does-the-compiler-assume*/} - -React Compiler assumes that your code: - -1. Is valid, semantic JavaScript -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` -3. Follows the [Rules of React](https://react.dev/reference/rules) - -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). - ### 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). +Please note that the compiler is still in Beta 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. @@ -119,7 +125,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro Prior to installing the compiler, you can first check to see if your codebase is compatible: -npx react-compiler-healthcheck@experimental +npx react-compiler-healthcheck@beta This script will: @@ -141,7 +147,7 @@ Found no usage of incompatible libraries. 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@experimental +npm install -D eslint-plugin-react-compiler@beta Then, add it to your eslint config: @@ -176,28 +182,18 @@ const ReactCompilerConfig = { }; ``` -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", -}; +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. -// src/app.jsx -export default function App() { - "use memo"; - // ... -} -``` +#### New projects {/*new-projects*/} -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. +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*/} 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 react-compiler-runtime@experimental +npm install react-compiler-runtime@beta You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: @@ -217,16 +213,22 @@ module.exports = function () { }; ``` -#### New projects {/*new-projects*/} +### Using the compiler on libraries {/*using-the-compiler-on-libraries*/} -If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior. +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. + +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. + +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). + +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. ## Usage {/*installation*/} ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler@experimental +npm install babel-plugin-react-compiler@beta The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. @@ -275,36 +277,7 @@ export default defineConfig(() => { ### Next.js {/*usage-with-nextjs*/} -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@experimental - - -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, - }, -}; - -module.exports = nextConfig; -``` - -Using the experimental option ensures support for the React Compiler in: - -- App Router -- Pages Router -- Webpack (default) -- Turbopack (opt-in through `--turbo`) - +Please refer to the [Next.js docs](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler) for more information. ### Remix {/*usage-with-remix*/} Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: @@ -337,40 +310,7 @@ export default defineConfig({ ### 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; -``` +A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). ### Expo {/*usage-with-expo*/} @@ -394,6 +334,16 @@ 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). +### What does the compiler assume? {/*what-does-the-compiler-assume*/} + +React Compiler assumes that your code: + +1. Is valid, semantic JavaScript. +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`. +3. Follows the [Rules of React](https://react.dev/reference/rules). + +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). + ### 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. From 8f6d6a92a496ab758e03000928bdacbbbafaddd3 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Oct 2024 12:13:10 -0400 Subject: [PATCH 06/15] [compiler] Remove section on healthcheck (#7239) * [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. * Clarify that 100% compilation is not necessary --- src/content/learn/react-compiler.md | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 4fc974fa9..cc7d31927 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. @@ -120,28 +124,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. @@ -165,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*/} From d9e650fe6ec6a8b2da56543c54126c408705353f Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Oct 2024 14:22:35 -0400 Subject: [PATCH 07/15] Add React Compiler Beta Release post (#7240) Add a new blog post announcing the React Compiler Beta release! --- .../2024/10/21/react-compiler-beta-release.md | 126 ++++++++++++++++++ src/content/blog/index.md | 6 + src/sidebarBlog.json | 7 + 3 files changed, 139 insertions(+) create mode 100644 src/content/blog/2024/10/21/react-compiler-beta-release.md diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md new file mode 100644 index 000000000..bba93e4ee --- /dev/null +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -0,0 +1,126 @@ +--- +title: "React Compiler Beta Release" +author: Lauren Tan +date: 2024/10/21 +description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler. + +--- + +October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). + +--- + + + +The React team is excited to share new updates: + + + +1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback. +2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package. +3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler. + +--- + +At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler). + +Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. + +In this post, we want to share what's next for React Compiler. + +## Try React Compiler Beta today {/*try-react-compiler-beta-today*/} + +At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag. + +To install React Compiler Beta: + + +npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +Or, if you're using Yarn: + + +yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta + + +You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here: + + + +## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} + +React Compiler’s eslint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. + +To install the linter only: + + +npm install -D eslint-plugin-react-compiler@beta + + +Or, if you're using Yarn: + + +yarn add -D eslint-plugin-react-compiler@beta + + +Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. + +## Backwards Compatibility {/*backwards-compatibility*/} + +React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18). + +## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} + +Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library. + +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. + +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. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. + +[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) + +## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} + +We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. + +From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). + +The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. + +## React Compiler at Meta {/*react-compiler-at-meta*/} + +At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components. + +We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us. + +We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization. + +## Roadmap to Stable {/*roadmap-to-stable*/} + +*This is not a final roadmap, and is subject to change.* + +We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and eslint plugin. + +* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. +* ✅ Public Beta: Available today, for feedback from the wider community. +* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. +* 🚧 General Availability: After final feedback period from the community. + +These releases also include the compiler's eslint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's eslint plugin, so only one plugin needs to be installed. + +Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. + +Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post. + +--- + +Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post. + +--- + +[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. + +[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. + +[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. \ No newline at end of file diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 4a1a165a3..e37631e80 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,6 +10,12 @@ This blog is the official source for the updates from the React team. Anything i
+ + +We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... + + + Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ... diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 26dcdc4dd..84947fdf5 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -11,6 +11,13 @@ "path": "/blog", "skipBreadcrumb": true, "routes": [ + { + "title": "React Compiler Beta Release and Roadmap", + "titleForHomepage": "React Compiler Beta Release and Roadmap", + "icon": "blog", + "date": "October 21, 2024", + "path": "/blog/2024/10/21/react-compiler-beta-release" + }, { "title": "React Conf 2024 Recap", "titleForHomepage": "React Conf 2024 Recap", From e2b2b90c2d3a13a4997d23cff5a8a14a004b6916 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 21 Oct 2024 15:02:06 -0400 Subject: [PATCH 08/15] Fix capitalization of eslint (#7241) --- src/content/blog/2024/10/21/react-compiler-beta-release.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index bba93e4ee..768a2e16b 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -50,7 +50,7 @@ You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React ## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} -React Compiler’s eslint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. +React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. To install the linter only: @@ -100,14 +100,14 @@ We also expected developer productivity wins from React Compiler. To measure thi *This is not a final roadmap, and is subject to change.* -We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and eslint plugin. +We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin. * ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. * ✅ Public Beta: Available today, for feedback from the wider community. * 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. * 🚧 General Availability: After final feedback period from the community. -These releases also include the compiler's eslint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's eslint plugin, so only one plugin needs to be installed. +These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed. Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. From a3656c235e6e51d6d761705e9adad2a00cc1292a Mon Sep 17 00:00:00 2001 From: Ricky Date: Mon, 21 Oct 2024 16:07:47 -0400 Subject: [PATCH 09/15] Add atproto-did (#7242) --- public/.well-known/atproto-did | 1 + 1 file changed, 1 insertion(+) create mode 100644 public/.well-known/atproto-did diff --git a/public/.well-known/atproto-did b/public/.well-known/atproto-did new file mode 100644 index 000000000..ad8b0a36b --- /dev/null +++ b/public/.well-known/atproto-did @@ -0,0 +1 @@ +did:plc:uorpbnp2q32vuvyeruwauyhe \ No newline at end of file From 1bda70ac459659d5ec916b6c130a3e27a8a49b0f Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 22 Oct 2024 01:55:44 -0400 Subject: [PATCH 10/15] Add link to eslint configuration in compiler blog post (#7244) --- src/content/blog/2024/10/21/react-compiler-beta-release.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 768a2e16b..f5a870b22 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -64,7 +64,7 @@ Or, if you're using Yarn: yarn add -D eslint-plugin-react-compiler@beta -Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. ## Backwards Compatibility {/*backwards-compatibility*/} From e628e5df0df29611592a3a15a594f28069966a35 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Wed, 23 Oct 2024 18:11:08 +0200 Subject: [PATCH 11/15] Add ESLint flat config example, fix ESLint name (#7246) * Add ESLint flat config example, fix ESLint name * Use official terminology * Fix key --- src/content/learn/react-compiler.md | 35 +++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index cc7d31927..df46954d2 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -13,7 +13,7 @@ These docs are still a work in progress. More documentation is available in the * Getting started with the compiler -* Installing the compiler and eslint plugin +* Installing the compiler and ESLint plugin * Troubleshooting @@ -26,7 +26,7 @@ The latest Beta release can be found with the `@beta` tag, and daily experimenta React Compiler is a new 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. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. +The compiler also includes an [ESLint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta: @@ -126,13 +126,30 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro ### 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. +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 -D eslint-plugin-react-compiler@beta -Then, add it to your eslint config: +Then, add it to your ESLint config: + +```js +import reactCompiler from 'eslint-plugin-react-compiler' + +export default [ + { + plugins: { + 'react-compiler': reactCompiler, + }, + rules: { + 'react-compiler/react-compiler': 'error', + }, + }, +] +``` + +Or, in the deprecated eslintrc config format: ```js module.exports = { @@ -140,15 +157,15 @@ module.exports = { 'eslint-plugin-react-compiler', ], rules: { - 'react-compiler/react-compiler': "error", + 'react-compiler/react-compiler': 'error', }, } ``` -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. +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. +**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*/} @@ -333,11 +350,11 @@ React Compiler can verify many of the Rules of React statically, and will safely [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. ### Something is not working after compilation {/*something-is-not-working-after-compilation*/} -If you have eslint-plugin-react-compiler installed, the compiler 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. +If you have eslint-plugin-react-compiler installed, the compiler 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. Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases. -If your app doesn't work properly after compilation and you aren't seeing any eslint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component). +If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component). ```js {2} function SuspiciousComponent() { From eb174dd932613fb0784a78ee2d9360554538cc08 Mon Sep 17 00:00:00 2001 From: Andre Sander Date: Wed, 23 Oct 2024 18:12:04 +0200 Subject: [PATCH 12/15] Update components-and-hooks-must-be-pure.md (#7245) --- .../reference/rules/components-and-hooks-must-be-pure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index 9da65d04a..d3d54560e 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -194,7 +194,7 @@ function ProductDetailPage({ product }) { } ``` -One way to achieve the desired result of updating `window.title` outside of render is to [synchronize the component with `window`](/learn/synchronizing-with-effects). +One way to achieve the desired result of updating `document.title` outside of render is to [synchronize the component with `document`](/learn/synchronizing-with-effects). As long as calling a component multiple times is safe and doesn’t affect the rendering of other components, React doesn’t care if it’s 100% pure in the strict functional programming sense of the word. It is more important that [components must be idempotent](/reference/rules/components-and-hooks-must-be-pure). From 0c2a6b8916d3bc5b4946da7a4c554276fc342d87 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 28 Oct 2024 15:44:06 +0900 Subject: [PATCH 13/15] Translate Compiler Beta release announcement --- .../2024/10/21/react-compiler-beta-release.md | 96 +++++++++---------- src/content/blog/index.md | 10 +- src/sidebarBlog.json | 13 +-- 3 files changed, 55 insertions(+), 64 deletions(-) diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index f5a870b22..033b16b7e 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -1,8 +1,8 @@ --- -title: "React Compiler Beta Release" +title: "React Compiler Beta リリース" author: Lauren Tan date: 2024/10/21 -description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler. +description: React Conf 2024 で、React Compiler の実験的リリースを発表しました。これは、ビルド時に自動メモ化を通じて React アプリを最適化するツールです。この投稿では、オープンソースの次のステップとコンパイラの進捗状況を共有したいと思います。 --- @@ -12,115 +12,115 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -The React team is excited to share new updates: +React チームより新しいアップデートを共有できることを嬉しく思います。 -1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback. -2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package. -3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler. +1. React Compiler ベータ版を本日公開し、アーリーアダプタやライブラリのメンテナが試用し、フィードバックを行えるようになります。 +2. React 17+ のアプリに対して、オプションの `react-compiler-runtime` パッケージを通じて React Compiler を公式にサポートします。 +3. コンパイラの段階的な採用に備えて、[React Compiler Working Group](https://github.com/reactwg/react-compiler) の公開メンバーシップを開放します。 --- -At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler). +[React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) にて、React Compiler の実験的リリースを発表しました。これは、ビルド時の自動的なメモ化を通じて React アプリを最適化するツールです。[React Compiler の紹介はこちらでご覧いただけます](/learn/react-compiler)。 -Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. +最初のリリース以来、React コミュニティから報告された多数のバグを修正し、コンパイラに対する貴重なバグ修正や貢献[^1]をいくつか頂き、多様な JavaScript パターンに対してコンパイラをより堅牢にする作業を行い、Meta 社内でコンパイラの展開を続けてきました。 -In this post, we want to share what's next for React Compiler. +この投稿では、React Compiler の次のステップを共有したいと思います。 -## Try React Compiler Beta today {/*try-react-compiler-beta-today*/} +## React Compiler Beta をすぐに試す {/*try-react-compiler-beta-today*/} -At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag. +[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) で、React Compiler のアップデートを共有しました。本日、React Compiler と ESLint プラグインの新しいベータ版のリリースを発表できることを嬉しく思います。新しいベータ版は `@beta` タグ付きで npm に公開されています。 -To install React Compiler Beta: +React Compiler ベータ版をインストールするには以下のようにします。 npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +または、Yarn を使用している場合は以下のようにします。 yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here: +[Sathya Gunasekaran](https://twitter.com/_gsathya) による React India での講演はこちらでご覧いただけます。 -## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} +## React Compiler リンタを今日から使い始める {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} -React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. +React Compiler の ESLint プラグインは、開発者が [React のルール](/reference/rules) に対する違反を事前に特定して修正するのに役立ちます。**リンタを今日から使い始めることを強くお勧めします**。リンタはコンパイラのインストールを必要としないため、コンパイラを試す準備ができていなくても独立して使用できます。 -To install the linter only: +リンタのみをインストールするには以下のようにします。 npm install -D eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +または、Yarn を使用している場合は以下のようにします。 yarn add -D eslint-plugin-react-compiler@beta -After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +インストール後、[ESLint の設定ファイルに記載を追加することでリンタを有効にできます](/learn/react-compiler#installing-eslint-plugin-react-compiler)。リンタを使用することで、React のルールに対する違反を特定でき、コンパイラが完全にリリースされる際の導入が容易になります。 -## Backwards Compatibility {/*backwards-compatibility*/} +## 後方互換性 {/*backwards-compatibility*/} -React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18). +React Compiler は React 19 に追加されたランタイム API に依存するコードを生成しますが、React 17 および 18 でもコンパイラが動作するようにサポートを追加しました。ベータ版では、まだ React 19 に移行していない場合でも、コンパイラ設定で小さな `target` を指定し、`react-compiler-runtime` を依存ライブラリとして追加することで、React Compiler を試すことができます。[これに関するドキュメントはこちらでご覧いただけます](/learn/react-compiler#using-react-compiler-with-react-17-or-18)。 -## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} +## ライブラリでの React Compiler の使用 {/*using-react-compiler-in-libraries*/} -Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library. +初期のリリースでは、アプリケーションでコンパイラを使用する際の主要な問題を特定することに焦点を当てていました。その後素晴らしいフィードバックをいただき、コンパイラを大幅に改善してきました。コミュニティからの幅広いフィードバックを受ける準備が整い、ライブラリの作者がコンパイラを試用し、ライブラリのパフォーマンスと開発者体験を向上させることができるようになりました。 -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. +React Compiler はライブラリのコンパイルにも使用できます。React Compiler はコード変換前のオリジナルのソースコードで動作する必要があるため、アプリケーションのビルドパイプライン中で、アプリが使用するライブラリをコンパイルすることは不可能です。そのため、ライブラリのメンテナが個別にライブラリをコンパイルし、テストし、コンパイル済みのコードを npm で配布することをお勧めします。 -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. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. +ライブラリのコードが事前にコンパイルされていれば、ライブラリのユーザはコンパイラを有効にしなくても、ライブラリに適用された自動メモ化の恩恵を受けることができます。ライブラリがまだ React 19 に移行していないアプリを対象としている場合、最小の `target` を指定し、`react-compiler-runtime` を dependency として直接追加してください。ランタイムパッケージはアプリケーションのバージョンに応じて正しい API の実装を使用し、必要に応じて欠けている API をポリフィルします。 -[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) +[これに関するドキュメントはこちら](/learn/react-compiler#using-the-compiler-on-libraries)。 -## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} +## React Compiler Working Group を全員に開放 {/*opening-up-react-compiler-working-group-to-everyone*/} -We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. +以前 React Conf にて、招待制の [React Compiler Working Group](https://github.com/reactwg/react-compiler) を発表し、コンパイラの実験的リリースに対するフィードバックを提供し、質問をし、貢献を行える場として利用してきました。 -From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). +本日より、React Compiler Beta のリリースに合わせ、Working Group のメンバーシップを全員に開放します。React Compiler Working Group の目標は、エコシステム全体で、既存のアプリケーションやライブラリによる React Compiler のスムーズかつ段階的な採用準備を整えることです。今後もバグ報告は [React リポジトリ](https://github.com/facebook/react)に行っていただく一方で、フィードバックや質問、アイディアの共有は、[Working Group のディスカッションフォーラム](https://github.com/reactwg/react-compiler/discussions)を利用してください。 -The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. +コアチームも研究結果を共有にディスカッションリポジトリを使用します。安定版リリースが近づくにつれ、重要な情報もこのフォーラムに投稿されます。 -## React Compiler at Meta {/*react-compiler-at-meta*/} +## Meta における React Compiler の利用 {/*react-compiler-at-meta*/} -At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components. +[React Conf](/blog/2024/05/22/react-conf-2024-recap) では、Quest Store と Instagram におけるコンパイラの本番投入が成功したことを発表しました。それ以来、[Facebook](https://www.facebook.com) や [Threads](https://www.threads.net) を含む Meta 社の複数の主要ウェブアプリにおいて、React Compiler の展開を行ってきました。つまり最近これらのアプリを使用していたなら、その体験をコンパイラが支えていたということです。これらのアプリをコンパイラに乗せるために必要なコード変更はほとんどなく、10 万以上の React コンポーネントを含むモノレポで移行に成功しました。 -We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us. +これらのアプリ全体で、顕著なパフォーマンス向上が見られました。展開を進める中で、[以前 React Conf で発表したもの](https://youtu.be/lyEKhv8-3n0?t=3223)と同程度の成果が、引き続き確認されています。これらのアプリは長らく Meta のエンジニアや React の専門家により手作業で調整され最適化されてきたものですから、数パーセントの改善でも大きな成果と言えるでしょう。 -We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization. +また、React Compiler による開発者の生産性向上も期待される効果でした。これを測定するために、Meta のデータサイエンスパートナー[^2]と協力して、手動メモ化が生産性に与える影響について広範な統計分析を行いました。Meta でコンパイラを投入する以前は、React に関するプルリクエストの約 8% でしか手動メモ化が利用されておらず、そのようなプルリクエストは作成に 31-46% 長くかかっていました[^3]。この結果は、手動メモ化が認知的負担を引き起こすという我々の直感に合致するものであり、React Compiler により効率的なコード作成とレビューが実現できる可能性を示唆するものです。特に、React Compiler は、開発者が明示的にメモ化を適用してくれる一部の（私たちの場合 8%）コードだけではなく、すべてのコードがデフォルトでメモ化されることを保証してくれるのです。 -## Roadmap to Stable {/*roadmap-to-stable*/} +## 安定版に向けてのロードマップ {/*roadmap-to-stable*/} -*This is not a final roadmap, and is subject to change.* +*これは最終的なロードマップではなく、変更される可能性があります*。 -We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin. +ベータ版リリースに続いて、React のルールに従うアプリやライブラリの大部分がコンパイラで問題なく動作することが証明された後で、近い将来にコンパイラのリリース候補をリリースする予定です。その後コミュニティからの最終的なフィードバックを受け付ける期間を経て、コンパイラの安定版リリースを予定しています。安定版リリースは React の新しい基盤の始まりとなるものであり、すべてのアプリとライブラリに対し、コンパイラと ESLint プラグインの使用が強く推奨されるようになります。 -* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. -* ✅ Public Beta: Available today, for feedback from the wider community. -* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. -* 🚧 General Availability: After final feedback period from the community. +* ✅ Experimental：React Conf 2024 でリリース。主にアーリーアダプタからのフィードバックを得るため。 +* ✅ Public Beta：本日リリース。より広いコミュニティからのフィードバックを得るため。 +* 🚧 リリース候補 (RC)：ルールに従うアプリやライブラリの大部分で React Compiler 問題なく動作するようになったら。 +* 🚧 一般提供：コミュニティからの最終的なフィードバック期間の後。 -These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed. +これらのリリースには、コンパイラ用の ESLint プラグインも含まれており、コンパイラによって静的に分析された診断結果を表示できます。既存の eslint-plugin-react-hooks プラグインをコンパイラ用の ESLint プラグインと統合し、1 つのプラグインだけをインストールすればよくなるよう計画しています。 -Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. +安定版リリース後には、コンパイラによる最適化と改善をさらに追加する予定です。これには、自動的なメモ化の継続的な改善と、全く新しい最適化の両方が含まれ、製品コードの変更は最小限または不要になる予定です。コンパイラの新しいリリースへのアップグレードは簡単に行えることを目指しています。各アップグレードはパフォーマンスを向上させ、多様な JavaScript と React パターンに対し、より良い処理が行えるようになります。 -Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post. +このプロセス全体を通じて、React 用の IDE 拡張機能のプロトタイプを作成する計画もあります。まだ研究の初期段階なので、将来の React Labs ブログ投稿で、より多くの知見を共有できることを期待しています。 --- -Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post. +この投稿のレビュー・編集に協力していただいた [Sathya Gunasekaran](https://twitter.com/_gsathya)、[Joe Savona](https://twitter.com/en_JS)、[Ricky Hanlon](https://twitter.com/rickhanlonii)、[Alex Taylor](https://github.com/alexmckenley)、[Jason Bonta](https://twitter.com/someextent)、[Eli White](https://twitter.com/Eli_White) に感謝します。 --- -[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. +[^1]: コンパイラの貢献に協力いただいた [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee)、[@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen)、[@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi) に感謝します。 -[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. +[^2]: Meta での React コンパイラに関する本研究を主導し、この投稿をレビューしていただいた [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) に感謝します。 -[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. \ No newline at end of file +[^3]: 作者の在職期間、差分の長さ・複雑さなど、潜在的な交絡因子を調整済み。 \ No newline at end of file diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 4bd48a44b..f4b1523da 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -14,17 +14,13 @@ React チームからの公式な更新のお知らせはこのブログに掲
-<<<<<<< HEAD - -======= - + -We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... +以前 React Conf 2024 で React Compiler の実験的リリースを行いました。それ以降も多くの進展がありましたので、この投稿では React Compiler の次の展開についてお伝えしたいと思います。 - ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 + 先週、ネバダ州ヘンダーソンで 700 人以上の参加者が集まり、最新の UI エンジニアリングについて議論する 2 日間のカンファレンス、React Conf 2024 を開催しました。対面でのカンファレンスは 2019 年以来であり、コミュニティが再び一堂に会することができたことを大変に嬉しく思いました。 diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index f12dd4aa3..89ea9c3d8 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -12,20 +12,15 @@ "skipBreadcrumb": true, "routes": [ { -<<<<<<< HEAD - "title": "React Conf 2024 振り返り", - "titleForHomepage": "React Conf 2024 振り返り", -======= - "title": "React Compiler Beta Release and Roadmap", - "titleForHomepage": "React Compiler Beta Release and Roadmap", + "title": "React Compiler Beta リリースとロードマップ", + "titleForHomepage": "React Compiler Beta リリースとロードマップ", "icon": "blog", "date": "October 21, 2024", "path": "/blog/2024/10/21/react-compiler-beta-release" }, { - "title": "React Conf 2024 Recap", - "titleForHomepage": "React Conf 2024 Recap", ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 + "title": "React Conf 2024 振り返り", + "titleForHomepage": "React Conf 2024 振り返り", "icon": "blog", "date": "May 22, 2024", "path": "/blog/2024/05/22/react-conf-2024-recap" From 9867050dd56cd74c6e303ea6ca834a47bf868426 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 28 Oct 2024 16:55:49 +0900 Subject: [PATCH 14/15] Resolve conflicts --- src/content/learn/react-compiler.md | 262 +++--------------- src/content/reference/react/useActionState.md | 28 +- src/content/reference/react/useReducer.md | 6 - src/content/reference/react/useState.md | 4 - src/content/reference/react/useTransition.md | 4 - .../components-and-hooks-must-be-pure.md | 6 +- 6 files changed, 43 insertions(+), 267 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 4e4b7d11d..87bc2b76f 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -3,11 +3,7 @@ title: React Compiler --- -<<<<<<< HEAD -このページでは、新しい実験的プロジェクトである React Compiler の概要と、試用の方法について説明します。 -======= -This page will give you an introduction to React Compiler and how to try it out successfully. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +このページでは、React Compiler の概要と、試用の方法について説明します。 @@ -16,52 +12,35 @@ This page will give you an introduction to React Compiler and how to try it out -<<<<<<< HEAD * コンパイラを使い始める -* コンパイラと eslint プラグインのインストール +* コンパイラと ESLint プラグインのインストール * トラブルシューティング -======= -* Getting started with the compiler -* Installing the compiler and ESLint plugin -* Troubleshooting ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 -<<<<<<< HEAD -React Compiler は実験的なコンパイラであり、コミュニティから早期フィードバックを得るためにオープンソース化したものです。まだ粗削りな部分があり、本番環境で使用できる準備は整っていません。 +React Compiler はベータ版の新しいコンパイラであり、コミュニティから早期フィードバックを得るためにオープンソース化したものです。Meta などの企業の本番環境で利用されていますが、あなたのアプリでコンパイラを本番利用できるかどうかは、コードベースの健全性や、[React のルール](/reference/rules)をどの程度守れているかに依存します。 -React Compiler の使用には React 19 RC が必要です。React 19 にアップグレードできない場合は、[Working Group](https://github.com/reactwg/react-compiler/discussions/6) で説明されているように、キャッシュ関数に対するユーザスペースの実装を試すことができます。ただしこれは推奨されておらず、可能な限り React 19 にアップグレードするべきです。 +最新版のベータリリースは `@beta` タグで、またデイリーの実験的リリースは `@experimental` タグで利用可能です。 -React Compiler は実験的なコンパイラであり、コミュニティから早期フィードバックを得るためにオープンソース化したものです。これはビルド時のみに実行されるツールであり、あなたの React アプリを自動的に最適化します。プレーンな JavaScript で動作し、[React のルール](/reference/rules)を理解しているため、コードを書き直す必要はありません。 +React Compiler は新しいコンパイラであり、コミュニティから早期フィードバックを得るためにオープンソース化したものです。これはビルド時のみに実行されるツールであり、あなたの React アプリを自動的に最適化します。プレーンな JavaScript で動作し、[React のルール](/reference/rules)を理解しているため、コードを書き直す必要はありません。 -コンパイラには、コンパイラの分析結果をエディタ内でその場で表示できる [eslint プラグイン](#installing-eslint-plugin-react-compiler) も含まれています。このプラグインはコンパイラとは独立して動作し、アプリでコンパイラを使用していなくても利用できます。すべての React 開発者に、この eslint プラグインを使用してコードベースの品質向上を図ることをお勧めします。 -======= -React Compiler is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. 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). +コンパイラには、コンパイラの分析結果をエディタ内でその場で表示できる [ESLint プラグイン](#installing-eslint-plugin-react-compiler) も含まれています。**すべての開発者に、このリンタを直ちに有効化することを強くお勧めします**。このリンタはコンパイラがインストールされていなくとも動作するため、アプリでコンパイラを試用する準備ができていない場合でも利用できます。 -The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`. - - -React Compiler is a new 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. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. - -The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta: +このコンパイラは現在 `beta` としてリリースされており、React 17 以降のアプリやライブラリで試すことができます。ベータ版をインストールするには以下のようにします。 npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +あるいは、Yarn を利用している場合は以下のようにします。 yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +まだ React 19 を利用していない場合は、[こちらのセクション](#using-react-compiler-with-react-17-or-18)に詳しい手順があります。 ### コンパイラは何をするのか {/*what-does-the-compiler-do*/} @@ -69,15 +48,11 @@ If you are not using React 19 yet, please see [the section below](#using-react-c このコンパイラは、JavaScript と React のルールに関する知識を使用して、コンポーネントやフック内にある値や値のグループを、自動的にメモ化します。ルールが守られていない部分を検出した場合、該当のコンポーネントやフックだけを自動的にスキップし、他のコードを安全にコンパイルし続けます。 -<<<<<<< HEAD -コードベースがすでに非常によくメモ化されている場合、コンパイラによる大きなパフォーマンス向上は期待できないかもしれません。しかし現実的には、パフォーマンス問題を引き起こす依存値を手動で正しくメモ化していくのは困難です。 -======= -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. +React Compiler は、React のルールが守られていない場合でもそれを静的に検出し、その影響を受けるコンポーネントやフックだけを最適化から安全に除外することが可能です。コードベースの 100% 全体を最適化させる必要はありません。 -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. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コードベースがすでに非常によくメモ化されている場合、コンパイラによる大きなパフォーマンス向上は期待できないかもしれません。しかし現実的には、パフォーマンス問題を引き起こす依存値を手動で正しくメモ化していくのは困難です。 #### React Compiler が行うメモ化の種類 {/*what-kind-of-memoization-does-react-compiler-add*/} @@ -139,25 +114,9 @@ function TableContainer({ items }) { 従って、`expensivelyProcessAReallyLargeArrayOfObjects` が多くの異なるコンポーネントで使用されている場合、同じ items が渡されたとしても、高コストな計算が繰り返し実行さることになります。コードを複雑化する前に、まずは[プロファイリング](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)して、それが本当に高コストかどうかを確認することをお勧めします。 -<<<<<<< HEAD -### コンパイラが前提としていること {/*what-does-the-compiler-assume*/} - -React Compiler は、あなたのコードが以下ようになっていることを仮定します。 - -1. 有効でセマンティックな JavaScript であること。 -2. nullable ないし省略可能な値について（例えば、TypeScript を使用している場合は [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) を使うなどで）チェックを行っていること。つまり `if (object.nullableProperty) { object.nullableProperty.foo }` とするか、オプショナルチェーンを使用して `object.nullableProperty?.foo` のようにしていること。 -3. [React のルール](https://react.dev/reference/rules)に従っていること。 - -React Comiler は多くの React のルールを静的に検証でき、エラーを検出した場合は安全にコンパイルをスキップします。エラーを確認するために、[eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler) のインストールもお勧めします。 - ### コンパイラを試すべきか {/*should-i-try-out-the-compiler*/} -コンパイラはまだ実験的であり、多くの粗削りな部分があります。Meta のような企業で本番環境で使用されてはいますが、アプリにコンパイラを本番導入すべきかどうかは、コードベースの健全性と [React のルール](/reference/rules)にどれだけ従っているかに依存します。 -======= -### Should I try out the compiler? {/*should-i-try-out-the-compiler*/} - -Please note that the compiler is still in Beta 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). ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コンパイラはまだベータ版であり、多くの粗削りな部分があります。Meta のような企業で本番環境で使用されてはいますが、アプリにコンパイラを本番導入すべきかどうかは、コードベースの健全性と [React のルール](/reference/rules)にどれだけ従っているかに依存します。 **今すぐコンパイラを使用する必要はありません。安定版リリースを待ってから採用しても構いません**。ただし、アプリで小規模な実験として試してみて、[フィードバック](#reporting-issues)を提供していただれば、コンパイラの改善に役立ちます。 @@ -165,46 +124,15 @@ Please note that the compiler is still in Beta and has many rough edges. While i 以下のドキュメントに加えて、コンパイラに関する追加情報やディスカッションについて [React Compiler Working Group](https://github.com/reactwg/react-compiler) を確認することをお勧めします。 -<<<<<<< HEAD -### 互換性の確認 {/*checking-compatibility*/} - -コンパイラをインストールする前に、まずコードベースが互換性があるかどうかを確認してください。 - - -npx react-compiler-healthcheck@experimental - - -このスクリプトは以下をチェックします。 - -- どれだけ多くのコンポーネントが正常に最適化できるか：多いほど良い -- `` の使用：これを有効にして指示に従っている場合、[React のルール](/reference/rules)に従っている可能性が高い -- 非互換ライブラリの使用：コンパイラと互換性がないことが既知のライブラリ - -以下は実行例です。 - - -Successfully compiled 8 out of 9 components. -StrictMode usage not found. -Found no usage of incompatible libraries. - - ### eslint-plugin-react-compiler のインストール {/*installing-eslint-plugin-react-compiler*/} -React Compiler は eslint プラグインも提供しています。eslint プラグインはコンパイラとは**独立して**使用できるため、コンパイラを使用しなくても eslint プラグインだけを使用できます。 -======= -### 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. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +React Compiler は ESLint プラグインも提供しています。eslint プラグインはコンパイラとは**独立して**使用できるため、コンパイラを使用しなくても ESLint プラグインだけを使用できます。 npm install -D eslint-plugin-react-compiler@beta -<<<<<<< HEAD -次に、eslint の設定に以下を追加します。 -======= -Then, add it to your ESLint config: +次に、ESLint の設定に以下を追加します。 ```js import reactCompiler from 'eslint-plugin-react-compiler' @@ -221,8 +149,7 @@ export default [ ] ``` -Or, in the deprecated eslintrc config format: ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +あるいは、非推奨の eslintrc 形式の設定ファイルの場合、以下のようにします。 ```js module.exports = { @@ -235,17 +162,11 @@ module.exports = { } ``` -<<<<<<< HEAD -eslint プラグインは、エディタ内で React のルールに関する違反を表示します。これが表示される場合、そのコンポーネントやフックの最適化をコンパイラがスキップしたということを意味します。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。 - -**すべての eslint の違反をすぐに修正する必要はありません**。ルール違反を自分のペースで修正しつつ、最適化されるコンポーネントやフックの数を徐々に増やしていくことができます。コンパイラを使用する前にすべてを修正する必要はありません。 -======= -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. +ESLint プラグインは、エディタ内で React のルールに関する違反を表示します。これが表示される場合、そのコンポーネントやフックの最適化をコンパイラがスキップしたということを意味します。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。 -**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. +**すべての ESLint の違反をすぐに修正する必要はありません**。ルール違反を自分のペースで修正しつつ、最適化されるコンポーネントやフックの数を徐々に増やしていくことができます。コンパイラを使用する前にすべてを修正する必要はありません。 ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 ### コンパイラをコードベースに展開する {/*using-the-compiler-effectively*/} @@ -262,42 +183,21 @@ const ReactCompilerConfig = { }; ``` -<<<<<<< HEAD -稀なケースですが、`compilationMode: "annotation"` のオプションを使用してコンパイラを「オプトイン」モードで実行するように設定することもできます。これにより、`"use memo"` ディレクティブでラベル付けされたコンポーネントやフックのみがコンパイルされるようになります。`annotation` モードはアーリーアダプタを補助するための一時的なものであり、`"use memo"` ディレクティブを長期的に使用することは意図していないことに注意してください。 - -```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. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コンパイラの導入に自信がついてきたら、他のディレクトリにも適用範囲を拡大し、アプリ全体に徐々に導入していくことができます。 #### 新規プロジェクト {/*new-projects*/} 新しいプロジェクトを開始する場合、コードベース全体でコンパイラを有効化できます。これがデフォルトの動作です。 -<<<<<<< HEAD -## 使用法 {/*installation*/} -======= -### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/} +### React 17 または 18 での React Compiler の利用 {/*using-react-compiler-with-react-17-or-18*/} -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. +React Compiler は React 19 RC と組み合わせることで最も良く動作します。アップグレードできない場合は、追加の `react-compiler-runtime` パッケージをインストールすることで、バージョン 19 以前でもコンパイル済みのコードを実行できます。ただし、サポートされる最低バージョンは 17 です。 npm install react-compiler-runtime@beta -You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: +コンパイラの設定で `target` を正しく指定する必要もあります。`target` は対象としたい React の最小のメジャーバージョン番号です。 ```js {3} // babel.config.js @@ -314,18 +214,17 @@ module.exports = function () { }; ``` -### Using the compiler on libraries {/*using-the-compiler-on-libraries*/} +### ライブラリでコンパイラを使う {/*using-the-compiler-on-libraries*/} -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. +React Compiler はライブラリのコンパイルにも使用できます。React Compiler はコード変換前の元のソースコード上で実行する必要があるため、アプリケーションのビルドパイプライン中で、利用しているライブラリをコンパイルすることはできません。そのため、ライブラリメンテナは個別にコンパイラでコンパイルとテストを行い、コンパイル済みのコードを npm に公開することをお勧めします。 -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. +ライブラリのコードが事前にコンパイルされていれば、ライブラリのユーザはコンパイラを有効にしなくても、ライブラリに適用された自動メモ化の恩恵を受けることができます。ライブラリがまだ React 19 に移行していないアプリを対象としている場合、[最小の `target` を指定し、`react-compiler-runtime` を dependency として直接追加してください](#using-react-compiler-with-react-17-or-18)。ランタイムパッケージはアプリケーションのバージョンに応じて正しい API の実装を使用し、必要に応じて欠けている API をポリフィルします。 -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). +ライブラリのコードではより複雑なパターンや避難ハッチを使用することが多いため、ライブラリでコンパイラを用いることに起因する問題を見つけるため、十分なテストを行うことをお勧めします。問題が見つかった場合、特定のコンポーネントやフックに [`'use no memo'`ディレクティブ](#something-is-not-working-after-compilation)を使用して最適化を無効にすることができます。 -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. +アプリの場合と同様ですが、コンパイラのメリットを享受するためにライブラリのコンポーネントやフックを 100% 完全にコンパイルする必要はありません。手始めに、まずライブラリ内で特にパフォーマンスに敏感な部分を特定し、そこが [React のルール](/reference/rules)を破っていないことを確認するとよいでしょう。この確認には `eslint-plugin-react-compiler` を使用できます。 -## Usage {/*installation*/} ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +## 使用法 {/*installation*/} ### Babel {/*usage-with-babel*/} @@ -379,40 +278,7 @@ export default defineConfig(() => { ### Next.js {/*usage-with-nextjs*/} -<<<<<<< HEAD -Next.js には React Compiler を有効にするための実験的な設定があります。これにより、Babel が `babel-plugin-react-compiler` と共に自動的にセットアップされます。 - -- React 19 Release Candidate を使用する Next.js canary をインストールする -- `babel-plugin-react-compiler` をインストールする - - -npm install next@canary babel-plugin-react-compiler@experimental - - -次に以下のようにして `next.config.js` 内で実験的オプションを設定します。 - -```js {4,5,6} -// next.config.js -/** @type {import('next').NextConfig} */ -const nextConfig = { - experimental: { - reactCompiler: true, - }, -}; - -module.exports = nextConfig; -``` - -この実験的オプションを使用ことで、以下で React Compiler がサポートされるようになります。 - -- App Router -- Pages Router -- Webpack（デフォルト） -- Turbopack（`--turbo` を通じてオプトイン） - -======= -Please refer to the [Next.js docs](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler) for more information. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +詳細については [Next.js ドキュメント](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler)を参照してください。 ### Remix {/*usage-with-remix*/} `vite-plugin-babel` をインストールし、コンパイラ付属の Babel プラグインを追加します。 @@ -445,44 +311,7 @@ export default defineConfig({ ### Webpack {/*usage-with-webpack*/} -<<<<<<< HEAD -React Compiler 用の独自のローダは、以下のようにして作成できます。 - -```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; -``` -======= -A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コミュニティによる Webpack ローダは[こちらで利用可能](https://github.com/SukkaW/react-compiler-webpack)です。 ### Expo {/*usage-with-expo*/} @@ -506,43 +335,26 @@ Rsbuild アプリで React Compiler を有効化する方法については [Rsb また、メンバとして参加することで React Compiler Working Group にフィードバックを提供することもできます。参加方法の詳細については [README](https://github.com/reactwg/react-compiler) を参照してください。 -<<<<<<< HEAD -### `(0 , _c) is not a function` エラー {/*0--_c-is-not-a-function-error*/} - -これは React 19 RC 以降を使用していない場合に発生します。これを修正するには、まず[アプリを React 19 RC にアップグレード](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)してください。 - -React 19 にアップグレードできない場合は、[Working Group](https://github.com/reactwg/react-compiler/discussions/6) で説明されているように、キャッシュ関数に関するユーザスペースの実装を試すことができます。ただしこれは推奨されておらず、可能な限り React 19 にアップグレードするべきです。 -======= -### What does the compiler assume? {/*what-does-the-compiler-assume*/} +### コンパイラが前提としていること {/*what-does-the-compiler-assume*/} -React Compiler assumes that your code: +React Compiler は、あなたのコードが以下のようになっていることを仮定します。 -1. Is valid, semantic JavaScript. -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`. -3. Follows the [Rules of React](https://react.dev/reference/rules). +1. 有効でセマンティックな JavaScript であること。 +2. nullable ないし省略可能な値についてアクセス前に（例えば、TypeScript を使用している場合は [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) を使うなどで）チェックを行っていること。つまり `if (object.nullableProperty) { object.nullableProperty.foo }` とするか、オプショナルチェーンを使用して `object.nullableProperty?.foo` のようにしていること。 +3. [React のルール](https://react.dev/reference/rules)に従っていること。 -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). ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +React Comiler は多くの React のルールを静的に検証でき、エラーを検出した場合は安全にコンパイルをスキップします。エラーを確認するために、[eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler) のインストールもお勧めします。 ### コンポーネントが最適化されたかどうかを知る方法 {/*how-do-i-know-my-components-have-been-optimized*/} [React Devtools](/learn/react-developer-tools) (v5.0+) には React Compiler のサポートが組み込まれており、コンパイラによって最適化されたコンポーネントの横に "Memo ✨" バッジが表示されます。 -<<<<<<< HEAD ### コンパイル後に何かが動作しない場合 {/*something-is-not-working-after-compilation*/} -eslint-plugin-react-compiler がインストールされている場合、コンパイラはエディタ内で React のルールに対する違反を表示します。これが表示された場合、コンパイラはそのコンポーネントやフックの最適化をスキップしたという意味です。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。**すべての eslint 違反をすぐに修正する必要はありません**。自分のペースで対応して、最適化されるコンポーネントやフックの数を増やしていくことができます。 -======= -### Something is not working after compilation {/*something-is-not-working-after-compilation*/} -If you have eslint-plugin-react-compiler installed, the compiler 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. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +eslint-plugin-react-compiler がインストールされている場合、コンパイラはエディタ内で React のルールに対する違反を表示します。これが表示された場合、コンパイラはそのコンポーネントやフックの最適化をスキップしたという意味です。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。**すべての ESLint 違反をすぐに修正する必要はありません**。自分のペースで対応して、最適化されるコンポーネントやフックの数を増やしていくことができます。 JavaScript の柔軟かつ動的な性質のため、すべてのケースを包括的に検出することはできません。無限ループなどのバグや未定義の動作が発生することがあります。 -<<<<<<< HEAD -コンパイル後にアプリが正しく動作せず、eslint エラーも表示されない場合、コンパイラがコードを誤ってコンパイルしている可能性があります。これを確認するには、関連があると思われるコンポーネントやフックを明示的に [`"use no memo"` ディレクティブ](#opt-out-of-the-compiler-for-a-component)を使って除外してみてください。 -======= -If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component). ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コンパイル後にアプリが正しく動作せず、ESLint エラーも表示されない場合、コンパイラがコードを誤ってコンパイルしている可能性があります。これを確認するには、関連があると思われるコンポーネントやフックを明示的に [`"use no memo"` ディレクティブ](#opt-out-of-the-compiler-for-a-component)を使って除外してみてください。 ```js {2} function SuspiciousComponent() { diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 793e1925b..5944249cb 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -35,11 +35,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin {/* TODO T164397693: link to actions documentation once it exists */} -<<<<<<< HEAD -コンポーネントのトップレベルで `useActionState` を呼び出してコンポーネントの state を作成し、[フォームアクションが呼び出されたとき](/reference/react-dom/components/form)に更新されるようにします。既存のフォームアクション関数と初期 state を `useActionState` に渡し、フォームで使用する新しいアクションと最新のフォーム state が返されます。あなたが渡した関数にも、最新のフォーム state が渡されるようになります。 -======= -Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +コンポーネントのトップレベルで `useActionState` を呼び出してコンポーネントの state を作成し、[フォームアクションが呼び出されたとき](/reference/react-dom/components/form)に更新されるようにします。既存のフォームアクション関数と初期 state を `useActionState` に渡し、フォームで使用する新しいアクションと最新のフォーム state、およびアクションの進行状況が返されます。あなたが渡した関数にも、最新のフォーム state が渡されるようになります。 ```js import { useActionState } from "react"; @@ -75,18 +71,11 @@ function StatefulForm({}) { #### 返り値 {/*returns*/} -<<<<<<< HEAD -`useActionState` は 2 つの値を含む配列を返します。 +`useActionState` は以下の値を含む配列を返します。 1. 現在の state。初回レンダー時には、渡した `initialState` と等しくなります。アクションが呼び出された後は、そのアクションが返した値と等しくなります。 2. フォームコンポーネントの `action` プロパティや、フォーム内の任意の `button` コンポーネントの `formAction` プロパティとして渡すことができる新しいアクション。 -======= -`useActionState` returns an array with the following values: - -1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action. -2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. -3. The `isPending` flag that tells you whether there is a pending Transition. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +3. 進行中のトランジションがあるかどうかを表す `isPending` フラグ。 #### 注意点 {/*caveats*/} @@ -116,18 +105,11 @@ function MyComponent() { } ``` -<<<<<<< HEAD -`useActionState` は、2 つの項目を含む配列を返します。 +`useActionState` は、以下の項目を含む配列を返します。 1. フォームの state の現在値。初期値はあなたが渡した 初期 state となり、フォームが送信された後はあなたが渡したアクションの返り値となります。 2. `
` の props である `action` に渡せる新しいアクション。 -======= -`useActionState` returns an array with the following items: - -1. The current state of the form, which is initially set to the initial state you provided, and after the form is submitted is set to the return value of the action you provided. -2. A new action that you pass to `` as its `action` prop. -3. A pending state that you can utilise whilst your action is processing. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +3. アクションが処理中かどうかを知るのに利用できる pending 状態。 フォームが送信されると、あなたが渡したアクション関数が呼び出されます。その返り値が、新たなフォームの state 現在値になります。 diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index 06bf6cec0..f41d0172b 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -51,15 +51,9 @@ function MyComponent() { #### 注意点 {/*caveats*/} -<<<<<<< HEAD * `useReducer` はフックなので、**コンポーネントのトップレベル**または独自のカスタムフック内でのみ呼び出すことができます。ループや条件の中で呼び出すことはできません。必要な場合は、新しいコンポーネントとして抜き出し、その中に state を移動させてください。 * `dispatch` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。 * Strict Mode では、React は[純粋でない関数を見つけやすくするために](#my-reducer-or-initializer-function-runs-twice)、リデューサと初期化関数を 2 回呼び出します。これは開発時の動作であり、本番には影響しません。リデューサと初期化関数が純粋であれば（そうあるべきです）、これはロジックに影響しません。片方の呼び出しの結果は無視されます。 -======= -* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* The `dispatch` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) -* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored. ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 --- diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 14463f82a..1360e4104 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -85,11 +85,7 @@ function handleClick() { * React は [state の更新をまとめて行います（バッチ処理）](/learn/queueing-a-series-of-state-updates)。**すべてのイベントハンドラを実行し終え**、`set` 関数が呼び出された後に、画面を更新します。これにより、1 つのイベント中に複数回の再レンダーが発生することはありません。まれに、早期に画面を更新する必要がある場合（例えば DOM にアクセスする場合など）がありますが、その場合は [`flushSync`](/reference/react-dom/flushSync) を利用できます。 -<<<<<<< HEAD * `set` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。 -======= -* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 * レンダー中に `set` 関数を呼び出すことは、*現在レンダー中の*コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、**前回のレンダーからの情報を保存**するために使用できます。[例を見る](#storing-information-from-previous-renders) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 2514876bc..f31d7ef0d 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -80,11 +80,7 @@ function TabContainer() { * `startTransition` に渡す関数は同期的でなければなりません。React はこの関数を直ちに実行し、その実行中に行われるすべての state 更新をトランジションとしてマークします。後になって（例えばタイムアウト内で）さらに state 更新をしようとすると、それらはトランジションとしてマークされません。 -<<<<<<< HEAD * `startTransition` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。 -======= -* The `startTransition` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 * トランジションとしてマークされた state 更新は、他の state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャートの再レンダーの途中で入力フィールドに入力を始めた場合、React は入力欄の更新の処理後にチャートコンポーネントのレンダー作業を再開します。 diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index 7d9c3928c..ad6a07f8e 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -194,11 +194,7 @@ function ProductDetailPage({ product }) { } ``` -<<<<<<< HEAD -`window.title` を更新するという望ましい結果をレンダーの外で達成する方法のひとつは、[`window` とコンポーネントを同期させる](/learn/synchronizing-with-effects)ことです。 -======= -One way to achieve the desired result of updating `document.title` outside of render is to [synchronize the component with `document`](/learn/synchronizing-with-effects). ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 +`document.title` を更新するという望ましい結果をレンダーの外で達成する方法のひとつは、[`document` とコンポーネントを同期させる](/learn/synchronizing-with-effects)ことです。 コンポーネントを複数回呼び出しても安全であり、他のコンポーネントのレンダーに影響を与えないのであれば、React はそれが厳密な関数型プログラミングの意味で 100% 純粋であるかどうかを気にしません。より重要なのは、[コンポーネントは冪等でなければならない](/reference/rules/components-and-hooks-must-be-pure)ということです。 From 8b797ebca7433849e0211b2560944089a7bed3e5 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 28 Oct 2024 17:05:02 +0900 Subject: [PATCH 15/15] Polish translation --- .../blog/2024/10/21/react-compiler-beta-release.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 033b16b7e..6216a6895 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -12,25 +12,25 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -React チームより新しいアップデートを共有できることを嬉しく思います。 +React チームより以下の最新情報を共有できることを嬉しく思います。 -1. React Compiler ベータ版を本日公開し、アーリーアダプタやライブラリのメンテナが試用し、フィードバックを行えるようになります。 -2. React 17+ のアプリに対して、オプションの `react-compiler-runtime` パッケージを通じて React Compiler を公式にサポートします。 +1. React Compiler ベータ版を本日公開します。アーリーアダプタやライブラリのメンテナが試用し、フィードバックを行えるようになります。 +2. React 17+ のアプリに対して、オプションの `react-compiler-runtime` パッケージを通じた React Compiler の使用を公式にサポートします。 3. コンパイラの段階的な採用に備えて、[React Compiler Working Group](https://github.com/reactwg/react-compiler) の公開メンバーシップを開放します。 --- [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) にて、React Compiler の実験的リリースを発表しました。これは、ビルド時の自動的なメモ化を通じて React アプリを最適化するツールです。[React Compiler の紹介はこちらでご覧いただけます](/learn/react-compiler)。 -最初のリリース以来、React コミュニティから報告された多数のバグを修正し、コンパイラに対する貴重なバグ修正や貢献[^1]をいくつか頂き、多様な JavaScript パターンに対してコンパイラをより堅牢にする作業を行い、Meta 社内でコンパイラの展開を続けてきました。 +初期のリリース以来、React コミュニティから報告された多数のバグを修正し、コンパイラに対する貴重なバグ修正や貢献[^1]をいくつか頂き、多様な JavaScript パターンに対してコンパイラをより堅牢にする作業を行い、Meta 社内でコンパイラの展開を続けてきました。 この投稿では、React Compiler の次のステップを共有したいと思います。 ## React Compiler Beta をすぐに試す {/*try-react-compiler-beta-today*/} -[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) で、React Compiler のアップデートを共有しました。本日、React Compiler と ESLint プラグインの新しいベータ版のリリースを発表できることを嬉しく思います。新しいベータ版は `@beta` タグ付きで npm に公開されています。 +[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) で、React Compiler の最新情報を共有しました。本日、React Compiler と ESLint プラグインの新しいベータ版のリリースを発表できることを嬉しく思います。新しいベータ版は `@beta` タグ付きで npm に公開されています。 React Compiler ベータ版をインストールするには以下のようにします。 @@ -92,7 +92,7 @@ React Compiler はライブラリのコンパイルにも使用できます。Re [React Conf](/blog/2024/05/22/react-conf-2024-recap) では、Quest Store と Instagram におけるコンパイラの本番投入が成功したことを発表しました。それ以来、[Facebook](https://www.facebook.com) や [Threads](https://www.threads.net) を含む Meta 社の複数の主要ウェブアプリにおいて、React Compiler の展開を行ってきました。つまり最近これらのアプリを使用していたなら、その体験をコンパイラが支えていたということです。これらのアプリをコンパイラに乗せるために必要なコード変更はほとんどなく、10 万以上の React コンポーネントを含むモノレポで移行に成功しました。 -これらのアプリ全体で、顕著なパフォーマンス向上が見られました。展開を進める中で、[以前 React Conf で発表したもの](https://youtu.be/lyEKhv8-3n0?t=3223)と同程度の成果が、引き続き確認されています。これらのアプリは長らく Meta のエンジニアや React の専門家により手作業で調整され最適化されてきたものですから、数パーセントの改善でも大きな成果と言えるでしょう。 +これらのアプリ全体で、顕著なパフォーマンス向上が見られました。導入を進める中で、[以前 React Conf で発表したもの](https://youtu.be/lyEKhv8-3n0?t=3223)と同程度の成果が、引き続き確認されています。これらのアプリは長らく Meta のエンジニアや React の専門家により手作業で調整され最適化されてきたものですから、数パーセントの改善でも大きな成果と言えるでしょう。 また、React Compiler による開発者の生産性向上も期待される効果でした。これを測定するために、Meta のデータサイエンスパートナー[^2]と協力して、手動メモ化が生産性に与える影響について広範な統計分析を行いました。Meta でコンパイラを投入する以前は、React に関するプルリクエストの約 8% でしか手動メモ化が利用されておらず、そのようなプルリクエストは作成に 31-46% 長くかかっていました[^3]。この結果は、手動メモ化が認知的負担を引き起こすという我々の直感に合致するものであり、React Compiler により効率的なコード作成とレビューが実現できる可能性を示唆するものです。特に、React Compiler は、開発者が明示的にメモ化を適用してくれる一部の（私たちの場合 8%）コードだけではなく、すべてのコードがデフォルトでメモ化されることを保証してくれるのです。 @@ -123,4 +123,4 @@ React Compiler はライブラリのコンパイルにも使用できます。Re [^2]: Meta での React コンパイラに関する本研究を主導し、この投稿をレビューしていただいた [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) に感謝します。 -[^3]: 作者の在職期間、差分の長さ・複雑さなど、潜在的な交絡因子を調整済み。 \ No newline at end of file +[^3]: 作成者の在職期間、差分の長さ・複雑さなど、潜在的な交絡因子を調整済み。 \ No newline at end of file