先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。
ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・？」って個人的になってました。
インターネットでも同じような印象を受けた人はいるらしく、なんやろな〜と思っていた矢先。
MobXの作者である `@mwestrate` 氏が、さくっとTweetしてるじゃありませんか！
なのでこの記事では、そのTweetを引用して、翻訳+ざっくりまとめをしておきます。
元Tweetはこちら
#MobX or @recoiljs? Saw a lot of questions on whether they're the same, so a quick thread. First of all, Recoil & MobX solve the same problem: efficient render widely shared state. This is a problem React (Context), Redux and most state management libs don't solve.
— Michel Weststrate (@mweststrate) 2020年5月15日
ざっくり日本語訳
MobXとRecoil、その違いがなにか気になってる人も多いと思うので、さくっとスレッドに書いてみます。
まず最初に、RecoilとMobXは同じ問題を解決してくれる。
その目的は、広く共有されたステートを、効率よくレンダリングすること。
これはReact（とContext）の問題で、Reduxやその他の状態管理ライブラリはそれを解決してくれない。
単語として、Atomや依存ツリーなどの表現は、RecoilにもMobXにも登場する。
MobX語を使ってRecoilを表現するなら、`observable.box` + `computed` + `useObserver`って感じ。
違いは、RecoilがReactが提供するAPIの上に成り立っているというところで、Concurrentモードなどにも適応しやすいはず。
MobXはより汎用的なライブラリで、React以外のプロジェクトでも使えるし、Flutterなど別の言語でも利用できる。
Recoil同様、MobXもAtomという概念を使うけど、それらはオブジェクトやMapや配列にラップされていてるので、簡単に組み合わせられる。
コレクション（ids）と、その中身を別のAtomとして表現する必要もない。
配列なら`observable.array`がそれを実現してくれてるし、なんならすべてのプロパティをAtomにしてくれる。
つまりとあるオブジェクトのプロパティAが変更されても、それを使っていないコンポーネントは再描画されないということ。
もちろん同じことはRecoilでもできるけど、それらを自分で記述する必要がある。（Selectorを書いたり、Atomの細分化をしたり）
ここが最大の違いで、Recoilを使う場合、欲しいものはすべて自分で調達する必要がある。
わかりやすいとも言えるし、理想的ではないとも言えるかもしれない。
React Hooksの性質上、それらは宣言的にでないといけない（もしくは追加のSelector）。
`{user.loggedIn ? user.name : ""}`というコードがあったときに、MobXは`loggedIn`が`true`のときだけ`name`を監視するけど、これを手動で実現するのは難しいと思う。
まとめると、RecoilとMobXは似てるところがある。
多数の、または個別に監視されるAtom（アプリケーションの状態の一部分）を使って（Reduxは常にこれが1つ）、コンポーネントの更新と必要なデータの導出やメモ化ができる。
MobXは、より抽象化されたMapや配列といった概念の上でAtomを利用して、それらを端的に追跡できる。
Recoilは、よりReact自身に近いもので、簡素。
免責: これらはトークを見て思ったことであり、まだ実際のプロジェクトで試したりはしてない。
個人的になにが同じように感じて、なにが違うのか知りたかっただけ。
みんなもトークをチェックしよう！