useRecoilValueLoadable(state)

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

useRecoilValue()とは異なり、このフックは非同期セレクターから読み取る際にErrorまたはPromiseをスローしません（React Suspenseを使用する目的のため）。代わりに、このフックはLoadableオブジェクトを返します。

React 18トランジションに対する実験的なサポートのために、useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()を使用してください。このサポートは、Recoil状態を変更することによって実現されています。

function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>

state：非同期操作を持つ可能性があるatomまたはselectorです。返されるロード可能な状態は、指定されたセレクター状態の状態によって異なります。

インターフェイスを持つ現在の状態のLoadableを返します

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

例

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

例​

例