🏎️

Jotaiのatom作成はRecoilより467倍速い!?そんなことある?

2 min read

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

JotaiのAPIはRecoilのAPIに似ていますが、実装はだいぶ違います。おそらく。実際に中身を比較したことがあるわけではないので。試しに一番単純なatom作成をベンチマーク比較してみました。

JSBench.meというサイトを使いました。

ツイート時点ではjotaiはUMDがなかったのですが、v1.5.1のリリース時点でUMDとSystemJSのビルドが入りました。

実際のベンチマーク方法は下記です。

Setup HTML

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/recoil@0.5.2/umd/recoil.min.js"></script>
<script src="https://unpkg.com/jotai@1.5.1/umd/index.js"></script>

Setup HTML

Setup JS

let i=0;const nextId=()=>`${++i}`;

Setup JS

JotaiのTest Case

nextId();
jotai.atom(0);

RecoilのTest Case

Recoil.atom({ key: nextId(), default: 0 });

Run

実行結果はこちらです。

Run

環境によって違うかも知れないので、興味がある方は試してみてください。

差が多少なら嬉しいのですが、ここまで違うと何か間違っているのではないかと気になります。もし実験して何か気づくことがあればお知らせください。

この手のベンチマークは少々誤解を招くことがあります。これは一側面を切り取って評価しているだけのもので、トータルのパフォーマンスの傾向は反映していません。例えば、js-framework-benchmarkではそこまでの差は出ません。(これもこれでコントロールされたベンチマークではありますが)

想像ですが、Recoilはatom作成時に事前処理的なものをして、後段でパフォーマンスを上げる仕組みでも入れているのかもしれません。RecoilではatomFamilyなどでatomを使い回すことが典型的のようです。一方、Jotaiではatomは使い捨てる感じです。Jotai流の書き方ではatomFamilyは基本的に使いません。この辺り、思想の違いが実装に現れているのだろうと感じました。

Jotaiに関する他の記事

https://zenn.dev/dai_shi/articles/010bbbb750aaf2

https://zenn.dev/dai_shi/articles/24c934b375f18c

https://zenn.dev/dai_shi/articles/369dc2a6b0877c

https://zenn.dev/dai_shi/articles/832dbd15b278be

https://zenn.dev/dai_shi/articles/b8ffe58b3a4791

https://zenn.dev/dai_shi/articles/990512a9bc78a8

https://zenn.dev/dai_shi/articles/1d2914a9fa71a6

https://zenn.dev/dai_shi/articles/4ee33ecd6375ad

https://zenn.dev/dai_shi/articles/5e98640bce605f

https://zenn.dev/dai_shi/articles/b5c78759bbbaf2

https://zenn.dev/dai_shi/articles/2fe00301268e2b

https://zenn.dev/dai_shi/articles/2c29a286002d94

https://zenn.dev/dai_shi/articles/8258695a631c1a

こんなに書いていたんですね。ほとんど短いですが。
今後は、トピックのリンクだけ貼っておけば良いですかね。

https://zenn.dev/topics/jotai

Discussion

ログインするとコメントできます