next.jsとfirebaseでのログイン認証判定にどうしてuseEffectを使うのでしょうか？

next.jsとfirebaseでのログイン認証判定をしたく色々調べていたのですが、
ほとんどがuseEffect内でログインずみかどうかを判定している記事ばかりでした。

副作用があるものをuseEffectで取得するのはわかるのですが、
ログイン判定にuseEffectを使用した場合、ログイン済もしくは未ログイン判定が初期レンダリングの後に実行され、本来表示されるべきもの以外が表示されると思うのですが、どうしてuseEffectを使用してログイン判定をしているのでしょうか？

下記が一例にな利ます。

import React, { useEffect, useState } from "react";
import { app } from "../base.js";

// contextの作成
export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  // ユーザーをログインさせる関数
  const login = async (email, password, history) => {
    try {
      await app.auth().signInWithEmailAndPassword(email, password);
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  // 新しいユーザーを作成しログインさせる関数
  const signup = async (email, password, history) => {
    try {
      await app.auth().createUserWithEmailAndPassword(email, password);
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    // Contextを使用して認証に必要な情報をコンポーネントツリーに流し込む。
    <AuthContext.Provider
      value={{
        login: login,
        signup: signup,
        currentUser
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

useEffectに入れない場合initializeのエラーが出るので、どうしてもuseEffectを使用しないといけない状態でした。

行動規範の内容に同意します

回答1件

ベストアンサー

ログイン済もしくは未ログイン判定が初期レンダリングの後に実行され、本来表示されるべきもの以外が表示されると思う

そうならないようにこちら側で処理を記述する必要があります。例えば currentuser の有無によって {children} をレンダリングするかしないか、というのを自分で決めなければいけません。そこはアプリを作る側の責任なのです。

useEffect を利用する理由は「処理の順序がレンダリング後」と決まっているためです。レンダリング前に副作用を起こして状態を変えてしまうと、せっかくそれまで計算してきた状態が順序が入れ替わったりしてレンダリングに影響してしまいます。計算できるものは計算しておいてレンダリング終了！そして副作用を発行！というデータの流れを保つことで処理の見通しが良くなりますし、処理スピードの向上にも繋がります。

また、順序が保証されているおかげで「レンダリング前に Firebase の初期化をやってレンダリング後に実際に Firebase にログイン状態を問い合わせに行く」ということが可能になります。そのための useEffect なのです。実は副作用自体どこでも発行は出来ます。が、順序がわからなくなって initialize エラーが出たりというようなことが起こってしまうのです。

投稿2021/01/11 08:58