この記事を書いた理由

Reactを学習し始めて２ヶ月程度。
なんとなくでしかまだわかっていないのですが、とにかく実践あるのみかと思い、家計簿アプリを作成しました。

結果つまずいたところがたくさんあったので、備忘録がてら記事にしたいと思います。
また、私と同じくReactの学習を始めたての方の参考になれば嬉しいです。

本題：ログイン後、リロードすると一瞬ログイン画面が表示される

ログインをしているかどうかを判別し、
ログインしているのであればHomeコンポーネントを表示
そうでなければLoginコンポーネントを表示する　といった挙動にしていました。

App.js

function App() {
  return (
    <AuthProvider>
      <Router>
        <div>
          <PrivateRoute exact path="/" component={Home} />
          <Route exact path="/Signup" component={Signup} />
          <Route exact path="/Login" component={Login} />
        </div>
      </Router>
    </AuthProvider>
  );
}

export default App;

これが、ログインしているはずなのに、ほんの一瞬ですがLoginコンポーネントが表示されていました。

これは、firebaseのデータベースに登録されているユーザーなのかどうかを取得するまでの間に
先にログインしていない認識の状態のLoginコンポーネントが出てしまっていたようです。

これは一旦、ログインをしているかしていないかの判断を待っている間の
ローディング画面を作ってあげる必要があります。

まずuseStateで下記内容を作成。

AuthProvider.js

  const [loading, setLoading] = useState(true);

初期値はtrue（ローディング画面の状態）にしておきます。
その後、ログイン認証済かどうか確認する前に下記useEffectの記述を追加。

AuthProvider.js

useEffect(() => {
    const unsubscribed = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return () => {
      unsubscribed();
    };
  }, []);

userがログインしていると無事判別できたら、
ローディングをfalseにすることで、Homeコンポーネントが表示されるようになりました！！