React状態管理ライブラリ Jotai とその他ライブラリとの比較 #JotaiFriends

この記事は公式DocのComparisonページの翻訳（下訳にDeepLを利用）と筆者のコメントが付いた内容になっています。原文と翻訳部分は引用表記しています。
https://github.com/pmndrs/jotai/blob/v1.5.2/docs/basics/comparison.mdx がソースです。

ご存知Reduxが登場せずに、急にZustandが出てきて何それ？となるかもしれません。ひとまず見ていきましょう。

JotaiとZustandの違いは？

How is Jotai different from Zustand?

ライブラリ名

Name

Jotai means "state" in Japanese. Zustand means "state" in German.

Jotaiは日本語で"状態"、Zustandはドイツ語で"状態"という意味です。

そうなんです、”状態”からきてます。なので発音も「じょーたい」です。

アナロジー（類似性）

Analogy

Jotai is close to Recoil. Zustand is close to Redux.

JotaiはRecoilに近く、ZustandはReduxに近いものです。

Recoil(リコイル)は最近日本でも認知が進んで触る人も多くなってきた？んでしょうか。JotaiはRecoilインスパイアです。
さて、近いと言われても・・・ですね、引き続き見ていきましょう。

状態（ステート）が存在する場所

Where state resides

Jotai state is within React component tree. Zustand state is in the store outside React.

JotaiのステートはReactコンポーネントツリーの中で、ZustandのステートはReactの外のストアにあります。

Reactの世界の中か外か、が違いになります。もし、あなたのアプリで扱うステートがReactのみで完結できるならばRecoilやJotaiが選択肢に入れることが出来ます。

状態（ステート）をどうやって構成するか

How to structure state

Jotai state consists of atoms (i.e. bottom-up). Zustand state is one object (i.e. top-down).

Jotaiのステートはatomの集まりからなり、Zustandのステートは１つのオブジェクトからなります。

ZustandやReduxはいわゆるシングルステートですね。

技術的な違い

Technical difference

The major difference is the state model. Zustand is basically a single store (you could create multiple stores, but they are separated.) Jotai is primitive atoms and composing them. In this sense, it's the matter of programming mental model.

大きな違いはステートモデルです。Zustandは基本的に1つのストア（複数のストアを作ることもできますが、分離されています）、Jotaiはプリミティブな複数のアトムで、それを合成しています。その意味では、プログラミングのメンタルモデルの問題です。

ZustandをReduxと読み替えて良いかと思います。

Jotai can be seen as a replacement for useState+useContext. Instead of creating multiple contexts, atoms share one big context.

JotaiはuseState+useContextの置き換えと見ることができます。複数のコンテキストを作る代わりに、atomsは一つの大きなContextを共有します。

JotaiはContext使ってるんですね。Reactの中か外か、とはこういうことですね。

Zustand is an external store and the hook is to connect the external world to the React world.

Zustandは外部のストアであり、フックは外部の世界とReactの世界を繋ぐためのものです。

ちょっとZustand話になってますが、Zustand.create()はReactとその外になるストアのつなぎ役、ということですね。

いつどちらを使うか

When to use which

• If you need a replacement for useState+useContext, Jotai fits well.
• If you want to update state outside React, Zustand works better.
• If code splitting is important, Jotai should perform well.
• If you prefer Redux devtools, Zustand is good to go.
• If you want to make use of Suspense, Jotai is the one.

• useState+useContextの代替が必要なら、Jotaiがよく合います。
• Reactの外側で状態を更新したい場合は、Zustandの方がうまくいくでしょう。
• コードの分割が重要なら、Jotaiがうまくいくはずです。
• Reduxのdevtoolsを好むなら、Zustandが良いです。
• Suspenseを活用するならJotaiはそのひとつです。

ちなみにJotaiもRedux DevToolsが使えます。
Devtoolsの使い方はこちらです。
https://jotai.org/docs/api/devtools

JotaiとRecoilの違いは？

How is Jotai different from Recoil?

(Disclaimer: the author is not very familiar with Recoil, this can be biased and not accurate.)

(免責事項：筆者はRecoilにあまり詳しくありません。偏りがあり、正確ではない可能性があります)

開発者

Developer

• Jotai is developed with collective work by a few developers in Poimandres (formerly react-spring) org.
• Recoil is developed by a team at Facebook.

• JotaiはPoimandres（旧react-spring）の数名の開発者による共同作業で開発されています。
• RecoilはFacebookのチームによって開発されています

Jotai作者のDaishiさんはPoimandresのメンバーです。そのためPoimandres名義でリリースされています。

基本事項

Basis

• Jotai is focusing on primitive APIs for lean learning, and it's unopinionated. (The same philosophy with Zustand)
• Recoil is full featured for big apps with various requirements.

• JotaiはリーンラーニングのためのプリミティブなAPIに力を入れていて、独創的です。(Zustandと同じ哲学)
• リコイルは、様々な要件を持つ大きなアプリに対応したフルフィーチャーなライブラリです。

学習コスト低く始められるのはこの哲学のおかげですね。

技術的な違い

Technical difference

• Jotai depends on atom object referential identities.
• Recoil depends on atom string keys.

• Jotaiはatomオブジェクトの参照性同一性に依存します。
• Recoilはatom文字列のキーに依存します。

比較してみます。

// Recoil
const countAtom = atom({
  key: 'countState', // unique ID (with respect to other atoms/selectors)
  default: 0, // default value (aka initial value)
});

// Jotai
const countAtom = atom(0);

いつどちらを使うか

When to use which

• If you want to learn something new, either should work.
• If you like Zustand, Jotai would also be pleasant.
• If your app heavily requires state serialization (storing state in storage, server, or URL), Recoil comes with good features.
• If you need React Context alternatives, Jotai comes with enough features.
• If you would try to create a new library, Jotai might give good primitives.
• Otherwise, both are pretty similar about the general goals and basic techniques, so please try both and give us a feedback.

• 新しいことを学びたいなら、どちらでもいいはずです。
• Zustandが好きなら、Jotaiも快適でしょう。
• もし、あなたのアプリがステートのシリアライゼーション（ストレージ、サーバー、URLへのステートの保存）を大きく必要とするなら、Recoilは良い機能を備えています。
• React Context の代替が必要なら、Jotai は十分な機能を備えています。
• 新しいライブラリを作ろうとするなら、Jotaiは良いプリミティブを与えてくれるかもしれません。
• その他、一般的な目標や基本的なテクニックについては、どちらもよく似ているので、ぜひ両方試してみてフィードバックをください。

Facebook（Meta）製に魅力を感じる人もいるかもしれません。TypeScript製なのはJotaiです。Key文字列が面倒ならJotaiはいかがでしょう。
余談ですが、RecoilもJotaiも伸びてます！
https://risingstars.js.org/2021/en#section-statemanagement

Jotaiの紹介特集について

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

Jotai Friendsとは

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

https://jotaifriends.dev/

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