React 18 トランジション

React 18に新しいフックuseTransition() が提供され、新しい状態にトランジションする際に、新しい状態が利用可能になるまで何を描画するかをコントロールできます。Recoil はこのアプローチと互換性があり、React の状態と一貫したビューを提供します。ただし、React 18 は同時更新からフォールバックする可能性があり、外部ストアの状態の変化に基づくトランジションの開始を公式にはまだサポートしていません。React チームはこのサポートの検討を進めていますが、それまでは以下のフックを通じて実験的にサポートを追加しました。他のフックは既にトランジションを完全にサポートしているはずなので、これらのバリアントのみが必要です。見つかっていない使用例があり、処理されていない可能性があるため、この API は実験的とみなされています。

• useRecoilState_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()

新しい結果が読み込まれている間、クエリの結果を表示する例を次に示します

function QueryResults() {
  const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams));
  return results;
}

function MyApp() {
  const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const [inTransition, startTransition] = useTransition();
  return (
    <div>
      {inTransition ? <div>[Loading new results...]</div> : null}

      Results: <React.Suspense><QueryResults /></React.Suspense>

      <button
        onClick={() => {
          startTransition(() => {
            setQueryParams(...new params...);
          });
        }
      >
        Start New Query
      </button>
    </div>
  );
}