ログインしたユーザーの情報をグローバルなステートに持たせるメリットはなんですか？

Question

前提

Gatsby.jsとFirebaseを使用しています。
ログイン機能を実装しようと思い、下記のYouTubeの動画を見ました。

• Gatsby Firebase Authentication

疑問

動画ではユーザー情報をグローバルステートに格納しています。

ユーザー情報をグローバルステートに格納するメリットは何がありますか？
または、グローバルステートに格納しないデメリットはありますか？

グローバルステートにユーザー情報を入れる場合、ユーザーの名前やプロフィール画像を表示したいコンポーネントで、グローバルステートuserを取得して、user.displayNameとかを使うかと思うのですが、グローバルステートを参照せずに下記のようにonAuthStateChanged メソッドでもユーザー情報を取得できました。

const [user, setUser] = useState();
useEffect(() => {
  firebase.auth().onAuthStateChanged((user) => setUser(user));
}, [])

グローバルステートにユーザー情報を格納するメリットについて、現状私が考えられるメリットは、ユーザー情報が欲しいコンポーネントで毎回上記を書く手間を省けることぐらいしか思いつきません。

---

とはいえ、ReactとFirebase authの組み合わせでのHow to記事を掘ってみると、グローバルステートにユーザー情報を格納している記事をいくつか見つけました。

• 【React】 Firebaseを使用して認証機能の実装 - Qiita
• ReactとFirebaseを使ってログインフォームを実装する② - Harkerblog
• ReactHooks + Firebase(Authentication, Firestore)でTodoアプリ作る - Qiita

---

なので、ユーザー情報をグローバルステートに入れないと困るケースや、onAuthStateChangedだけだと困るケースなど、なにかしら教えていただきたいです。

別にonAuthStateChangedだけでがんばりたい、という感じでもないです。
onAuthStateChangedだけでやりくりするメリットも思いついていないので。

Comments

[hoshi-takanori]

onAuthStateChanged は非同期なので、結果が返るまで user の値を使えないからでは。

Answer 1

ここのコンポーネントが同じリソース（ユーザー情報）に対する状態を持つということは非常に不安定な作りになります。この場合 Firebase の API が コールバックで状態を更新してくれますが、これがローカルなコンポーネントに複数存在することでタイムラグが生じ一貫性がなくなります。同じ情報を参照しているのに違った結果を得てしまう、そういった時間が発生してしまいます。

小規模なアプリケーションならば問題にならないかもしれませんが、規模が大きくなってくるに連れてこの問題は厄介になってきます。数百ものコンポーネントにユーザー情報を更新して回らなければいけないとしたら見ている途中に古いデータが表示されてしまうかもしれません。

なのでよく参照される状態はなるべくグローバルなところにおいてコンテキストフックを使って管理しましょう、というのがベターなプラクティスです。コンポーネントはできるだけ状態をもたせたくないのです。