useEffectが二重に実行されてしまう。

Question

概要

ログイン状態をuseEffectで動的に確認し、コンテキストへログイン情報を保存するコードを書いています。
その中で二重に実行されてしまい困っています。

コード

  const reducer = (state:any, action:any) =>{
    switch(action.type){
      case 'login':
        return {...state, login:true, username:action.payload}
      case 'logout':
        return {...state, login:false, username:''}
    }
  }
  const [state, dispatch] = useReducer(reducer,{login:false,username:''})
  
  React.useEffect(() => {
    async function getCurrentAuthenticatedUser() {
      const userInfo = await Auth.currentUserInfo();
      if(userInfo){
        dispatch({type: 'login', payload: userInfo.username})
      }else{
        dispatch({type: 'logout', payload: ''})
      }
    }
    getCurrentAuthenticatedUser();
    console.log(state)
  }, [state.login]);

実行結果

コンソールログには下記ように表示されます。

{login: false, username: ""}
{login: true, username: "hogehohehoge"}

質問

1. 1回目の時点で「{login: true, username: "hogehohehoge"}」を表示される事を想定していましたが、実際は初期化した際のデータを表示されています。これは非同期に実行されていることが原因でしょうか？
2. 1回目の時点で「{login: true, username: "hogehohehoge"}」と表示させるにはどの部分を変更すべきでしょうか？

補足

おそらく原因はuseEffectの第2引数にあると考えていますが、しかしuseEffect内で第2引数に変更を加える処理を書くと無限ループになってしまう事があります。
やはり、このようなケースはアンチパターンなのでしょうか？

Answer 1

実際は初期化した際のデータを表示されています。これは非同期に実行されていることが原因でしょうか？

はい、useEffectそのものが本質的に非同期な動作です。

1回目の時点で「{login: true, username: "hogehohehoge"}」と表示させるにはどの部分を変更すべきでしょうか？

非同期でしかログイン状態を取ってこられないのであれば難しいです。「表示自体を遅延させる」「ロード中…のように表示を行う」といった妥協策が必要かもしれません。