diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 019d8ed60..92658ba3a 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -3,7 +3,11 @@ title: React Compiler --- +<<<<<<< HEAD このページでは、新しい実験的プロジェクトである React Compiler の概要と、試用の方法について説明します。 +======= +This page will give you an introduction to React Compiler and how to try it out successfully. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 @@ -19,6 +23,7 @@ title: React Compiler +<<<<<<< HEAD React Compiler は実験的なコンパイラであり、コミュニティから早期フィードバックを得るためにオープンソース化したものです。まだ粗削りな部分があり、本番環境で使用できる準備は整っていません。 React Compiler の使用には React 19 RC が必要です。React 19 にアップグレードできない場合は、[Working Group](https://github.com/reactwg/react-compiler/discussions/6) で説明されているように、キャッシュ関数に対するユーザスペースの実装を試すことができます。ただしこれは推奨されておらず、可能な限り React 19 にアップグレードするべきです。 @@ -27,6 +32,30 @@ React Compiler の使用には React 19 RC が必要です。React 19 にアッ 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). + +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: + + +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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ### コンパイラは何をするのか {/*what-does-the-compiler-do*/} @@ -96,6 +125,7 @@ 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 は、あなたのコードが以下ようになっていることを仮定します。 @@ -109,6 +139,11 @@ React Comiler は多くの React のルールを静的に検証でき、エラ ### コンパイラを試すべきか {/*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). +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 **今すぐコンパイラを使用する必要はありません。安定版リリースを待ってから採用しても構いません**。ただし、アプリで小規模な実験として試してみて、[フィードバック](#reporting-issues)を提供していただれば、コンパイラの改善に役立ちます。 @@ -121,7 +156,7 @@ React Comiler は多くの React のルールを静的に検証でき、エラ コンパイラをインストールする前に、まずコードベースが互換性があるかどうかを確認してください。 -npx react-compiler-healthcheck@experimental +npx react-compiler-healthcheck@beta このスクリプトは以下をチェックします。 @@ -143,7 +178,7 @@ Found no usage of incompatible libraries. React Compiler は eslint プラグインも提供しています。eslint プラグインはコンパイラとは**独立して**使用できるため、コンパイラを使用しなくても eslint プラグインだけを使用できます。 -npm install eslint-plugin-react-compiler@experimental +npm install -D eslint-plugin-react-compiler@beta 次に、eslint の設定に以下を追加します。 @@ -178,6 +213,7 @@ const ReactCompilerConfig = { }; ``` +<<<<<<< HEAD 稀なケースですが、`compilationMode: "annotation"` のオプションを使用してコンパイラを「オプトイン」モードで実行するように設定することもできます。これにより、`"use memo"` ディレクティブでラベル付けされたコンポーネントやフックのみがコンパイルされるようになります。`annotation` モードはアーリーアダプタを補助するための一時的なものであり、`"use memo"` ディレクティブを長期的に使用することは意図していないことに注意してください。 ```js {2,7} @@ -193,17 +229,59 @@ 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 #### 新規プロジェクト {/*new-projects*/} 新しいプロジェクトを開始する場合、コードベース全体でコンパイラを有効化できます。これがデフォルトの動作です。 +<<<<<<< HEAD ## 使用法 {/*installation*/} +======= +### 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@beta + + +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], + ], + }; +}; +``` + +### 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. + +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*/} +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler@experimental +npm install babel-plugin-react-compiler@beta コンパイラには、ビルドパイプラインでコンパイラを実行するために使用できる Babel プラグインが含まれています。 @@ -252,6 +330,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 をインストールする @@ -282,6 +361,9 @@ module.exports = nextConfig; - 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ### Remix {/*usage-with-remix*/} `vite-plugin-babel` をインストールし、コンパイラ付属の Babel プラグインを追加します。 @@ -314,6 +396,7 @@ export default defineConfig({ ### Webpack {/*usage-with-webpack*/} +<<<<<<< HEAD React Compiler 用の独自のローダは、以下のようにして作成できます。 ```js @@ -348,6 +431,9 @@ function reactCompilerLoader(sourceCode, sourceMap) { module.exports = reactCompilerLoader; ``` +======= +A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ### Expo {/*usage-with-expo*/} @@ -371,11 +457,23 @@ 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*/} + +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). +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ### コンポーネントが最適化されたかどうかを知る方法 {/*how-do-i-know-my-components-have-been-optimized*/} diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 89eff92e6..73cb728ce 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -20,7 +20,7 @@ React Canary の以前のバージョンでは、この API は React DOM の一 `useActionState` は、フォームアクションの結果に基づいて state を更新するためのフックです。 ```js -const [state, formAction] = useActionState(fn, initialState, permalink?); +const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); ``` @@ -35,7 +35,11 @@ const [state, formAction] = useActionState(fn, initialState, permalink?); {/* 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 ```js import { useActionState } from "react"; @@ -71,10 +75,18 @@ function StatefulForm({}) { #### 返り値 {/*returns*/} +<<<<<<< HEAD `useActionState` は 2 つの値を含む配列を返します。 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 #### 注意点 {/*caveats*/} @@ -104,10 +116,18 @@ function MyComponent() { } ``` +<<<<<<< HEAD `useActionState` は、2 つの項目を含む配列を返します。 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 フォームが送信されると、あなたが渡したアクション関数が呼び出されます。その返り値が、新たなフォームの state 現在値になります。 @@ -133,13 +153,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 +182,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."; } } diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index f41d0172b..3f55145cd 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -51,9 +51,15 @@ 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. +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 --- diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 1360e4104..fc7d8c06e 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -85,7 +85,11 @@ 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) +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 * レンダー中に `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 f31d7ef0d..0b3b2d35b 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -80,7 +80,11 @@ 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) +>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2 * トランジションとしてマークされた state 更新は、他の state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャートの再レンダーの途中で入力フィールドに入力を始めた場合、React は入力欄の更新の処理後にチャートコンポーネントのレンダー作業を再開します。