React 18 轉換

React 18 提供一個新 hook useTransition()，用於轉換到新狀態，同時控制在新狀態準備就緒之前要呈現的內容。反作用力應該與此方法相容，並提供與 React 狀態一致的檢視畫面。然而，React 18 可能回退到同時更新，目前還不正式支援基於狀態變更到外部儲存所引發的轉換。這是 React 團隊正在研究支援的功能，但在此之前，已透過以下 hook 新增此功能的實驗性支援；其他 hook 應該已經完全支援轉換，因此僅需要這些變異。此 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>
  );
}