React状態管理ライブラリ Jotai の便利関数の紹介 #JotaiFriends

この記事は公式Docのutilsから、いくつかのAPIを抜粋して簡易的に紹介するものです。
内容は、v1.5.3時点のものです。

Jotai入門がまだの方はこちらからぜひ！
https://zenn.dev/tell_y/articles/7a5bd147d34ec2

はじめに

Core APIは最小限に提供されていますが、jotai/utilsからは便利な関数が提供されています。
ここではいくつかをピックアップし簡単に紹介していきたいと思います。
全てのutilsはこちらのページからどうぞ。
https://jotai.org/docs/api/utils

useUpdateAtom

以下のようにuseAtomを使うとタプルの0番目であるステートを無視しているものの、useAtomとしてはstateを監視するのでupdate()するとそのコンポーネントはレンダリングが走ります。

const [, update] = useAtom(anAtom);

このように、コンポーネント内においてstateは使わずupdate()だけ実行する場合にuseUpdateAtom()が利用できます。
上記は以下のように書くことが出来ます。

const update = useUpdateAtom(anAtom);

https://jotai.org/docs/utils/use-update-atom

atomWithObservable

rxjsのようにobservableなものからatomを作ることが出来ます。
これを使う場合、<Suspense>でラップしたコンポーネント（ツリー）内で使う必要があります。

import { atomWithObservable } from 'jotai/utils';
import { interval } from 'rxjs';

const counterSubject = interval(1000).pipe(map((i) => `#${i}`));
const counterAtom = atomWithObservable(() => counterSubject);

https://jotai.org/docs/utils/atom-with-observable

atomWithStorage

Reactの場合は、localStorageやsessionStorage、React Nativeの場合だとAsyncStorageを使った永続化のために使用します。

import { atomWithStorage } from 'jotai/utils';

const darkModeAtom = atomWithStorage('darkMode', false); // 第１引数はkey, 第２引数は初期値

https://jotai.org/docs/utils/atom-with-storage

atomWithHash

atomWithStorageのように永続化をURLハッシュで行います。
ハッシュを書き換えるとatomの値も変わり、atomの値が書き換わるとハッシュも書き換わります。

https://jotai.org/docs/utils/atom-with-hash

atomFamily

RecoilのatomFamilyのように使いたいという提案から用意されました。（issue #23）
動作を似せるためには、以下のようにする必要があります。
atomFamily()は、paramを受け取ってatomを返す関数を作ります。既に作られたatomだった場合はキャッシュを返します。
Recoil勢向けなAPIですね。

import { atom } from 'jotai'
import deepEqual from 'fast-deep-equal'

const fooFamily = atomFamily((param) => atom(param), deepEqual)

https://jotai.org/docs/utils/atom-family

useHydrateAtoms

NextjsのようにSSRするアプリのためにuseHydrateAtomsが用意されています。
例えばサーバー側でuserAtomの値が'yamamoto'となったとします、もしhydrateする仕組みがないとクライアントでは'(no name)'のままとなります。
useHydrateAtoms([[userAtom, userFromServer]])のように[atom, value]の組み合わせで適用できます。

import { atom, useAtom } from 'jotai'
import { useHydrateAtoms } from 'jotai/utils'

const userAtom = atom({ name: '(no name)' })
const UserPage = ({ userFromServer }) => {
  useHydrateAtoms([[userAtom, userFromServer]])
  const [user] = useAtom(userAtom)
}

https://jotai.org/docs/utils/use-hydrate-atoms

おわりに

基本的にはcore APIで出来ることがutilsにあるようです。
今回はいくつか抜粋して簡易的にみましたが、今後はサンプルコード付きで丁寧に触っていく機会を設けたいと思います。
概要を把握するならutilsのページを眺めるだけである程度はつかめるかと思います。数もそこまで多くはないので、軽く概要を掴んで後で必要になったら詳しく知っていく、で問題ないでしょう。
使用頻度高いのはuseUpdateAtomでしょうか。

Jotaiの紹介特集について

この記事はJotai FriendsによるJotai紹介特集記事の1つです。記事一覧はこちらからどうぞ。

Jotai Friendsとは

いちJotaiファンとして、エンジニアの皆さんにもっとJotaiを知ってもらって使ってもらいたい、そんな思いから立ち上げたのがJotai Friendsです。

https://jotaifriends.dev/

現在まだまだ準備中ですが今後ともよろしくお願いします！
（ご興味持っていただけた方は是非jotaifriends.devにてEメールアドレスのご登録をお願いします🙏）