Jotai: 状態?! 日本語っぽい名称のReact用ステート管理ライブラリ #JavaScript

はじめに

本記事ではJotaiというReactのライブラリを紹介します。名称は日本語の「状態」から来ています。最近、Zustandというライブラリのメンテナスを任されているのですが(紹介記事)、その議論の中でZustandの枠には収まらないアイデアが出てきて、じゃあもう一つ作ればいいじゃん、となりました。Zustandはドイツ語の「状態」なのですが、誰かが日本語の「状態」を調べて、Jotaiって言うんだ、npmでもまだ使われていないパッケージ名だ、となりました。

そんなこんなで9月にリリースしました。リリース時のツイートがこちら

we are releasing JŌTAI today https://t.co/T66zQVyKcz 🎉 this is @dai_shi 's take of the atomic state model. quite similar to recoil but focusses on a small api surface w/ simpler albeit equally powerful atoms and derived state. jōtai is 100% ready for concurrent mode and suspense pic.twitter.com/5UHTnyBLdh
— Paul Henschel (@0xca0a) September 8, 2020

Jotaiとは

Reactのステート管理のライブラリです。一言で言うと、Recoilに近いです。人によってはほぼ同じと言う感想を持つ人もいますし、人によってはRecoilのAPIは複雑すぎるけどJotaiのAPIはシンプルで違うと言う感想を持つ人もいます。JotaiはRecoilにインスパイアされて作られていますし、あえて似せている部分もあります。しかし、背景は少し違います。JotaiはContext APIのパフォーマンス問題を解決することが目的で、その際のAPIとしてatomが都合良かったということです。atomモデルのAPIを実現するだけであれば、ZustandのようにContext APIではなくReactの外にstoreを作る方が筋がいいかもしれません。

JotaiのAPI

JotaiのAPIはuseStateやuseContextに似ています。Jotaiが提供するAPIは Provider, atom, useAtom の3つです。ProviderはContext Providerのように使いますが、全atomで共通でありpropsを受け取りません。atomはatom(の設定オブジェクト)を生成します。useAtomはuseContextのように使いますが、contextの代わりにatomを指定します。

import { Provider, atom, useAtom } from 'jotai';

const textAtom = atom('hello');

const Component = () => {
  const [text, setText] = useAtom(textAtom);
  return (
    <input value={text} onChange={e => setText(e.target.value)} />
  );
};

const App = () => (
  <Provider>
    <Component />
  </Provider>
);

textAtomは他のコンポーネントでも使うことができます。その際はuseStateとは異なり値はProvider内で共有されます。

useStateからuseAtomに変更する例はこちら

How to use Jotai https://t.co/OJjJMx6v6k in the simplest way.

From React useState to Jotai useAtom: Counter example. pic.twitter.com/RMhyVlyJMu
— Daishi Kato (@dai_shi) September 14, 2020

派生atom

上記の利用方法だけでも一定の有用性はありますが、atomの有用性は派生atomにもあります。派生atomは、すでに定義されている一つまたは複数のatomから、新しいatomとして定義するものです。例えば、先ほどのtextAtomから次のような派生atomを作ることができます。

const uppercaseAtom = atom(get => get(textAtom).toUpperCase());

uppercaseAtomはtextAtomが変化した際にのみ再評価されるため、それをuseAtomで利用するコンポーネントの再レンダリングが最小限に抑えられます。

リポジトリ

GitHubのページはこちらです。

基本的な使い方はREADMEにコンパクトに書かれていますのでぜひご参照ください。

紹介YouTube

YouTubeに紹介動画を上げてくれた方がいるので、合わせてご覧ください。

おわりに

本記事では、あまり詳細な使い方に踏み込まず表面的な紹介をしました。興味がある方はまずこの基本的な使い方から試してみてください。より詳細なトピックとしては、atomの書き込みのカスタマイズ(writable atom)、非同期処理(suspense)やConcurrent Mode対応などがあります。少し触って慣れてきた後に試してみるのが良いでしょう。

質問などありましたら、お気軽に〜。