サーバコンポーネントは新しいタイプのコンポーネントです。クライアントアプリケーションや SSR サーバとは別の環境で、バンドル前に事前にレンダーされます。 React Server Components の “server” とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。 サーバを使用しないサーバコンポーネント サーバを使用するサーバコンポーネント サーバコンポーネントにインタラクティビティを追加する サーバコンポーネントでの非同期コンポーネント処理 サーバコンポーネントのサポートを追加する方法 React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワ

さらに例を見る 引数 scope: 1 つ以上の set 関数を呼び出して state を更新する関数。React は引数なしで直ちに scope を呼び出し、scope 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。このような更新はノンブロッキングになり、不要なローディングインジケータを表示しないようになります。 返り値 startTransition は何も返しません。 注意点 startTransition は、トランジションが保留中 (pending) であるかどうかを知るための方法を提供しません。トランジションの進行中にインジケータを表示するには、代わりに useTransition が必要です。 state の set 関数にアクセスできる場合にのみ、state 更新をトランジションにラップできます。ある props や

快適に変更やデバッグが行えるコンポーネントと、常にバグの種になるコンポーネントの違いは、state をうまく構造化できているかどうかです。ここでは、state 構造を考慮する際に役立つ、いくつかのヒントをご紹介します。 このページで学ぶこと 単一の state 変数と複数の state 変数の使い分け state の構成において避けるべきこと state 構造の一般的な問題を修正する方法 state 構造の原則 state を格納するコンポーネントを作成する際に、いくつ state 変数を使うのか、データ構造をどのようにするのかについて選択を行う必要があります。最適とはいえない state 構造でも正しいプログラムを作成することは可能ではありますが、より良い選択をするために役立つ原則がいくつか存在します。 関連する state をグループ化する。2 つ以上の state 変数を常に同時に更

コンポーネントによっては、ユーザ操作の結果として画面上の表示内容を変更する必要があります。フォーム上でタイプすると入力欄が更新される、画像カルーセルで「次」をクリックすると表示される画像が変わる、「購入」をクリックすると買い物かごに商品が入る、といったものです。コンポーネントは、現在の入力値、現在の画像、ショッピングカートの状態といったものを「覚えておく」必要があります。React では、このようなコンポーネント固有のメモリのことを state と呼びます。 このページで学ぶこと useState を使って state 変数を追加する方法 useState フックが返す 2 つの値 複数の state 変数を追加する方法 state がローカルと呼ばれる理由 通常の変数ではうまくいかない例 以下は、彫刻の画像をレンダーするコンポーネントです。“Next” ボタンをクリックすると、index

state は複数のコンポーネント間で独立しています。React は UI ツリー内の各コンポーネントの位置に基づいて、どの state がどのコンポーネントに属するか管理します。再レンダーをまたいでどのようなときに state を保持し、どのようなときにリセットするのか、制御することができます。 このページで学ぶこと React が state の保持とリセットを行うタイミング React にコンポーネントの state のリセットを強制する方法 key とタイプが state の保持にどのように影響するか state はレンダーツリー内の位置に結びついている React はあなたの UI のコンポーネント構造をレンダーツリーとしてビルドします。 コンポーネントに state を与えると、その state はそのコンポーネントの内部で「生存」しているように思えるかもしれません。しかし、実

useFormStatus フックは、現在 React の Canary および experimental チャンネルでのみ利用可能です。リリースチャンネルについてはこちらをご覧ください。

ほとんどの場合、flushSync の使用は避けることができます。flushSync は最後の手段として使用してください。 さらに例を見る 引数 callback: 関数。React はこのコールバックを直ちに呼び出し、そこに含まれるすべての更新作業を同期的にフラッシュします。また、保留中の更新、エフェクト、エフェクト内の更新もフラッシュすることがあります。この flushSync 呼び出しの結果として更新のサスペンドが起きると、フォールバックが再表示される可能性があります。 返り値 flushSync は undefined を返します。 注意点 flushSync can significantly hurt performance. Use sparingly. flushSync may force pending Suspense boundaries to show their

さらに例を見る 引数 value: 遅延させたい値。任意の型を持つことができます。 Canary only 省略可能 initialValue: コンポーネントの初回レンダー時に使用する値です。このオプションが省略された場合、初回レンダー時には代わりにレンダーできる value の前のバージョンがないことになるので、useDeferredValue は値の遅延を行いません。 返り値 currentValue: 初回レンダー時には、返される値はあなたが渡した値と同一になります。更新時には、React はまず古い値で再レンダーを試み（つまり返り値は古い値になり）、次に新しい値でバックグラウンドで再レンダーを試みます（返り値は更新後の値になります）。 注意点 更新がトランジション内で発生する場合、更新は既に遅延されているため、useDeferredValue は常に新しい value のみを返し

さらに例を見る 引数 element: element 引数は有効な React 要素でなければなりません。例えば、<Something /> のような JSX ノード、createElement の呼び出し結果、または別の cloneElement の呼び出し結果などです。 props: props 引数はオブジェクトか null でなければなりません。null を渡すと、クローンされた要素は元の element.props をすべて保持します。それ以外の場合、props オブジェクト内のすべての項目について、返される要素では element.props の値よりも props からの値が「優先」されます。残りの props は元の element.props から埋められます。props.key や props.ref を渡した場合、それらは元のものを置き換えます。 省略可能 ...c