PromiseとLoadableの違い

Loadableは、3つの状態に同期的にアクセスできる

内部の状態にアクセスできるPromiseのようなもの

そのため、各状態ごとにViewの表示を書ける

code:ts

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;

}

}

PromiseとLoadableで共通している点

非同期を3つの状態で表現する

table:_

Promise pending fulfilled rejected

Loadable loading hasValue hasError

内部状態は(ユーザーから見ると)read onlyである

参考