👻

JotaiとRecoilの違いは何か、string keysが不要というのはどういうことか

2023/08/23に公開

JotaiとRecoilは似てます。一方で、細かい違いは多くあります。決定的な違いを一つ挙げるとすれば、stringをkeyにしているRecoilに対して、Jotaiはatomのobject referenceをkeyにしています。表面的にはstring keyを指定しなくて良い手軽さが売りになっています。

よくある比較:

// Recoil
const greeting = atom({ key: 'greeting', default: 'hello' });

// Jotai
const greeting = atom('hello');

では、表面的ではない違いは何でしょうか。もう一つのポイントは内部実装に Map ではなく WeakMap を使っていることです。つまり、atomのreferenceが無くなればJotaiのstoreからもそのうち消えるということです。

// Jotai
let counter = atom(0);
counter = null; // referenceが無くなる

これは単にメモリリークの心配が減るだけでなく、使い捨てのatomがいくらでも作れることになります。

// Jotai
const numAtomAtom = atom((get) => {
  const num = get(counter);
  return atom(num);
});

まあ、パッと見てなぜこんなことをがしたいのか分からないかもしれませんが、色々応用できるのです。Recoilではこのようなことはできません。なので、RecoilにはatomFamily/selectorFamilyが用意されているのだと思います。JotaiにもatomFamilyはありますが、GCされたくないキャッシュ等に利用シーンがあるものの、基本はあまり使わなくても良いのではないかと思います。

最後に面白い事実を一つ。Jotaiの実装はWeakMapのため、ライブラリコードとしては、一体atomがいくつ使われているかを知ることができません。

https://twitter.com/dai_shi/status/1380885195549597696

https://twitter.com/dai_shi/status/1631487223614046209

https://twitter.com/dai_shi/status/1675664173286686720

Jotai Friends

Discussion