Async support is first class in jotai. It fully leverages React Suspense.
JotaiでのAsyncサポートは一流です。React Suspenseをフルに利用しています。
Suspenseが関係するのはatomのread関数をasync化する時のみです。write関数はSuspenseで囲わずともasync関数として定義・使用可能です。
Suspense
To use async atoms, you need to wrap your component tree with
<Suspense>.
If you have<Provider>at least one<Suspense>is placed inside the<Provider>.非同期atomを使うには、コンポーネントツリーを
<Suspense>で囲む必要があります。
もし、<Provider>があれば、少なくとも1つの<Suspense>が<Provider>の中に入ります。
const App = () => (
<Provider>
<Suspense fallback="Loading...">
<Layout />
</Suspense>
</Provider>
)
Having more
<Suspense>s in the component tree is possible.コンポーネントツリーでより多くの
<Suspense>を持つことは可能です。
Async read atom
The
readfunction of an atom can return a promise. It will suspend and re-render when the promise is fulfilled.atomの
read関数は、promiseを返すことができます。promiseが実行されるとレンダリングを中断して再レンダリングします。
Most importantly, useAtom only returns a resolved value.
最も重要なことは、useAtomは解決された値しか返さないということです。
const countAtom = atom(1)
const asyncCountAtom = atom(async (get) => get(countAtom) * 2)
// even though the read function returns a promise, 訳） read関数がプロミスを返しても
const Component = () => {
const [num] = useAtom(asyncCountAtom)
// `num` is guaranteed to be a number. 訳） `num` は数値であることが保証されます。
}
An atom becomes async not only if the atom read function is async, but also one or more of its dependencies are async.
atomは、atomのread関数が非同期であるだけでなく、その依存関係の1つ以上が非同期である場合には非同期となります。
const anotherAtom = atom((get) => get(asyncCountAtom) / 2)
// even though this atom doesn't return a promise,
// it is a read async atom because `asyncCountAtom` is async.
// 訳） このatomはプロミスを返しませんが、`asyncCountAtom`は非同期なので、非同期なread-only atomになります。
Jotaiの紹介特集について
この記事はJotai FriendsによるJotai紹介特集記事の1つです。記事一覧はこちらからどうぞ。
Jotai Friendsとは
いちJotaiファンとして、エンジニアの皆さんにもっとJotaiを知ってもらって使ってもらいたい、そんな思いから立ち上げたのがJotai Friendsです。
現在まだまだ準備中ですが今後ともよろしくお願いします！
（ご興味持っていただけた方は是非jotaifriends.devにてEメールアドレスのご登録をお願いします🙏）
Jotai Friends のテックブログです。 React状態管理ライブラリJotai(jotai.org)を新たな選択肢に。 エンジニアの皆さんが安心してJotaiを採用できるように支援します。 Powered by twitter.com/t6adev
Discussion