useMemorizedRecoilValue

Recoil で非同期 selector のデータ取得中に直前の値を参照できるようにする React hooks

English

About

Recoil では selector の get コールバック関数に Promise を返すことができます。 しかし、取得中のデータデータを扱うためにコンポーネントを <React.Suspense /> でラップする必要があり、また Promise が解決するまでの間は直前の値を参照することもできません。 useMemorizedRecoilValue はロード中に直前の値を返し、<React.Suspense /> でラップする必要がなくなります。

Installation

npm i --save use-memorized-recoil-value
# or
yarn add use-memorized-recoil-value

Usage

import useMemorizedRecoilValue from 'use-memorized-recoil-value';

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({ get }) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

const Sample = () => {
  const { value: userName } = useMemorizedRecoilValue(currentUserNameQuery);

  return <div>{username}</div>;
};

Reference

type useMemorizedRecoilValue = (
  recoilValue: RecoilValue<T>
) => { value: T | undefined; loadable: Loadable<T> }