【React】Jotai で Firebase Authentication の認証状態を管理

先日書いた下記を状態管理ライブラリ Jotai を使って書いてみます。

https://zenn.dev/riemonyamada/articles/ad38200a1c7fa3

Jotai とは

Jotai は Recoil に影響を受けて作られた React のための状態管理ライブラリです。
Recoil との比較は公式サイトにのっています。

https://jotai.org/docs/basics/comparison#how-is-jotai-different-from-recoil

Jotai を使って Firebase Authentication の認証状態を管理する

今回は Jotai 自身の説明は割愛して、先日書いた Recoil を使った Firebase Authentication の認証状態管理のコードをそのまま Jotai に置き換えてみます。

結果、ほぼ同じように書けました。
Recoil でのAtom Effectsが jotai ではonMountプロパティに該当します。

import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { atom } from 'jotai';
import { useAtomValue } from 'jotai/utils';
import { AuthUser } from '../types';

type AuthUserOrNull = AuthUser | null;

const auth = getAuth();

const authUserState = atom<Promise<AuthUserOrNull> | AuthUserOrNull>(null);

authUserState.onMount = (setAtom) => {
  // a: 最初の認証状態を取得した時に解決するPromiseを初期値に設定
  let resolvePromise: (value: AuthUserOrNull) => void;
  const initialValue = new Promise<AuthUserOrNull>((resolve) => {
    resolvePromise = resolve;
  });
  setAtom(initialValue);

  // b: 認証状態の監視
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    // c: Userから必要なプロパティだけ取り出す
    if (user) {
      const { uid, email, displayName, metadata } = user;
      const authUser = {
        uid,
        email,
        displayName,
        metadata,
      };
      resolvePromise(authUser);
      setAtom(authUser);
    } else {
      resolvePromise(null);
      setAtom(null);
    }
  });
  // d: 監視を終了する関数を返す
  return () => {
    unsubscribe();
  };
};

// e: atomの値をサブスクライブするフック
export function useAuthUser() {
  return useAtomValue(authUserState);
}

その他の Jotai の特徴

まださわりはじめて数日ですが、Recoil でできる基本的なことはほとんどできるのではないでしょうか。

あと、Jotai のアドバンテージとしてすでにガベージコレクションが実装されていることです。
どのコンポーネントからも参照されなくなると garbage collected されます。

また、atomのwrite関数で他のatomのsetができるのも色々な用途に使えそうです。