【Jotai】ZustandよりJotaiを採用した理由

こんにちは、フリーランスエンジニアの太田雅昭です。

Jotai

Jotaiは、Reactのための軽量なステート管理ライブラリです。atomと呼ばれる単位を使用して状態を管理します。最小限のAPIで直感的にステートを定義・操作できます。このシンプルさに加え、TypeScriptとの相性も良いため、型安全に開発が進められる点も魅力の一つです。

Jotai vs Zustand

Jotaiはちょい複雑

JotaiはZustandに比べてちょっと複雑です。複数ステートをまとめて定義するZustandに対して、Jotaiは一つ一つ作成してそれぞれを操作します。こうしたことから、一見とっつきにくそうに見えます。

ですが、この複雑さが逆に、より細かい制御やカスタマイズを可能にしています。

また、下記のようにすることで、シンプルな利用シーンに対応することもできます。

export const sessionAtom = atom<Session | null>(null);
export const userAtom = atom<User | null>(null);

export const useAuth = () => {
  const session = useAtomValue(sessionAtom);
  const user = useAtomValue(userAtom);
  return { session, user };
}

JotaiはSSRに強い

JotaiはSSRに強いです。useHydrateAtomsを使用すれば、何も考えずにサーバーの値で初期化できます。初期値反映タイミングによるちらつきも起きません。また複数の値をまとめて初期化できるのも魅力です。

// サーバー情報を元に、状態を初期化
export function useHydrateAuth(params: { session: Session | null, user: User | null }) {
  const { session, user } = params;
  useHydrateAtoms([[sessionAtom, session], [userAtom, user]]);
}

まとめ

最初は簡単なZustandを使おうとしたのですが、これまでにも簡単さと柔軟性のトレードオフには悩まされてきました。結局柔軟性を取った方が、後々のストレスも軽減することも多いので、それを踏まえて色々調べていた次第です。Zustandのまとめて定義も魅力的ですが、Jotaiでも上記のようにすればまとまった単位で見れるようになるため、割とスッキリするのではないかと思います。