useRecoilStateLoadable(state)

このフックは非同期セレクターの値を読み取るために使用することを目的としています。このフックはコンポーネントを暗黙的に指定された状態にサブスクライブします。

useRecoilState()とは異なり、このフックは非同期セレクターから読み込むときにErrorまたはPromiseをスローしません（React Suspenseと連携させる目的のため）。代わって、このフックは値のLoadableオブジェクトとセッターのコールバックを返します。

function useRecoilStateLoadable<T>(state: RecoilState<T>): [Loadable<T>, (T | (T => T)) => void]

state: 一部の非同期操作を持つ可能性のある書き込み可能なatomまたはselector。返されるロード可能な状態は、提供された状態セレクターの状態に依存します。

インターフェースを使用して現在の状態のLoadableを返します：

state: セレクターの状態を示します。可能な値は、'hasValue'、'hasError'、'loading' です。
contents: この Loadable によって表される値です。状態が hasValue の場合、実際値であり、状態が hasError の場合はスローされた Error オブジェクトであり、状態が loading の場合は値の Promise です。

例

function UserInfo({userID}) {
  const [userNameLoadable, setUserName] = useRecoilStateLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

例​

例