Jotai v2はだいぶ小さくなりました、しかしポイントはそこではなく

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

と言っても、v1の初期の頃と同じくらいです。v1は、途中から実験的なbranchingの機能を入れたため少し大きくなりました。v1.11.0からサイズが増えたのは、v2 APIが混在したからです。

ライブラリ自体のサイズがよく注目されますが、アプリケーションコードのサイズ削減にどれくらい寄与するかもポイントだと思います。

簡単な例ですが、ZustandとJotaiでカウンターアプリの比較をしてみましょう。

Zustandの場合

import { create } from 'zustand';

const useCountStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

export const Counter = () => {
  const { count, increase } = useCountStore();
  return (
    <div>
      {count} <button onClick={increase}>increase</button>
    </div>
  );
};

Jotaiの場合

import { atom, useAtomValue, useSetAtom } from 'jotai';

const countAtom = atom(0);
const increaseAtom = atom(null, (get, set) => set(countAtom, (c) => c + 1);

export const Counter = () => {
  const count = useAtomValue(countAtom);
  const increase = useSetAtom(increaseAtom);
  return (
    <div>
      {count} <button onClick={increase}>increase</button>
    </div>
  );
};

Terser REPLで比較

数字的には大したことないですが、注目したいのは、zustandの場合は、countやincreaseなどのプロパティ名がminifyされずに残ってしまうことです。jotaiの場合は、atomを定義した変数の名前が長くてもminifyされています。Reactでclassコンポーネントよりも関数コンポーネントでhooksを使った方が小さくなるという話は比較的知られているかもしれませんが、それも同様だと思います。

おわりに

もうちょっと差が出るかと思いましたが、カウンターアプリが小さすぎました。あと、Zustandのフックでselectorを使わなかったのも大きそうです。もう少し実際的なアプリで比較した方がいいかもしれません。あと誰か、RecoilとJotaiでも比較してみませんか。