Reactでfirebase認証をして、ログインユーザ名をuseContextで画面に表示したい

Question

Authでfirebaseから取得したユーザ名を、Dashboardに表示したいです。

ユーザ情報の取得自体はできているのですが、
Dashboard読み込み時にはuseContext内の情報がundefinedとなり、読み込みが完了した時点でuseContextがundefinedからユーザ情報に変わることを確認しています。

この挙動がなぜかわからず解決ができません。
undefinedになってしまうと、表示しようとしている{user}がundefinedとなりエラーになります。

読み込み完了前に、先にデータが反映されるようにするには、どのように記述すれば良いでしょうか？

Dashboard.jsx

const Dashboard = () => {
  const classes = useStyles();
  const [user, setUser] = useState()
  const currentUser = useContext(AuthContext)

  useEffect(() => {

    setUser(currentUser["currentUser"]["displayName"])
}, []);

  return (
    <div>
      {user}
    </div>
)

Auth.tsx

import { User } from 'firebase';
import { FC, createContext, useEffect, useState, useContext } from 'react';

import firebase from '../utils/Firebase';

type AuthContextProps = {
  currentUser: User | null | undefined
}

const AuthContext = createContext<AuthContextProps>({ currentUser: undefined });

const AuthProvider: FC = ({ children }) => {
  const [currentUser, setCurrentUser] = useState<User | null | undefined>(
    undefined
  );

  useEffect(() => {
    // ログイン状態が変化するとfirebaseのauthメソッドを呼び出す
    firebase.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
    })
  }, []);
  /* 下階層のコンポーネントをラップする */
  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  )
}


export { AuthContext, AuthProvider }

Answer 1

onAuthStateChangedが非同期なので、setCurrentUserされる前にレンダーされてしまうのが原因です。
ならば非同期じゃなく同期にすれば、とasync awaitかpromiseを使ってやったとしても
useEffectがcomponentDidMountと同様初回レンダー後に動く為、同期的に取得しても初期表示時には間に合いません。

なので、単純な解決策としては、currentUserがnullの場合はレンダリングせず、
currentUserが設定されるとレンダリングするようにするのが良いかと思います。

{currentUser && (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
)}

よくあるこういう書き方のやつです。

Comments

[neoz]

ありがとうございます！やはりそういうことですよね、解決策わからずだったのでありがたいです。

ただ、初歩的で申し訳ないのですが、return文含めどのように書けば良いでしょうか？