Open2022/08/25にコメント追加1

state更新タイミング

ログアウト機能をつけようと思い、以下のようなクリックイベントを作成

setLoginUser(null)でloginUserはnullになると思いました

Header.tsx

  const onClickLogout = useCallback(() => {
    setLoginUser(null);
    history.push("/");
    console.log(loginUser);
  }, [loginUser, setLoginUser, history]);

しかし、TOP画面には遷移しますが、コンソールにはログインする際のユーザー情報が表示されます。

なぜか？

onClick等の関数内でset関数を実行した場合、その瞬間にStateが更新されるわけではなく、console.log(loginUser);には更新前のStateの値が表示される。

試しに遷移後のTOP画面でconsole.log(loginUser);をするとnullになっていることが確認できる。