reactのuseEffectを使った際に、別のコンポーネントへリダイレクトした際にもなぜかuseEffectが読まれてしまう。

Question

実現したいこと

ログインユーザーがログイン画面にアクセスした場合、メインメニューページにリダイレクトさせる。その際にその旨を伝えるアラートを表示。
ここまではできているのですが、このアラートが、通常のログアウト状態からのログインでも表示されてしまうため、それを回避したい。

前提

reactアプリをTypeScript、firebase authenticationを使って、ユーザー管理機能を持ったシステムを作っています。
すでにログインしているユーザーのログイン画面への遷移はあるべき挙動ではないため、MainMenuページへのリダイレクトをするという機能を実装中に、以下の意図しない挙動が発生しました。

発生している問題

ログインユーザーに関する求める挙動は、求めるままに実現できました。ログイン中のため、メインメニューに移動します。という旨のアラートが表示され、okボタンを押すとMainMenuへ遷移します。
ですが、ログアウトをし、通常のログインを実行した際に、ログイン自体はできるのですが、ページ遷移直前に先述のアラートが出てしまい、okボタンを押すことでページ遷移がされます。本来、この通常のログインではアラートは必要なく、すぐにログインされて欲しいシーンです。

該当のソースコード

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) =>{
      if (user) {
        navigate("/mainMenu");
        alert("ログイン中のため、メインメニューに移動します")
      }
    });
    return () => {
      unsubscribe();
    }
  },[]);

試したこと

コードを直接変更したというよりは、useEffectの挙動に関する学習に努めました。現状の解釈としては、第二引数の配列の中に何も指定をしなければ、レンダリング時の一度だけuseEffectが実行されるということがわかりました。

補足情報（FW/ツールのバージョンなど）

firebase authentication
react-router-dom v6.15.?
ログイン機能、ログアウト機能、MainMenuページ等は正常に動いているため、該当する箇所と思われるコードだけを記載させていただきました。質問自体の経験が未熟なため、もし記載した以外に考慮に必要となるコードがあれば教えてください。追記します。

Comments

[hoshi-takanori]

その useEffect をどのコンポーネントに書いて、そのコンポーネントをどう使ってるかの問題のような…。

[servus.k]

@hoshi-takanori さん
コメントありがとうございます！

useEffectはLogin.tsxというファイルでログインに関するビューとロジックを持ったコンポーネントの中で記述しています。なので、ログインページに遷移した際(初回レンダリングした際)にuseEffectが読まれ、その時にログアウト状態であればuseEffectの中のif条件に該当しないため、何も起こらずuseEffectを終了し、記載してないですがこのuseEffectより下に記述してある通常のログインを実行するだけだと思うのですが。

useEffectの挙動に関する理解不足があるのでしょうか。

[hoshi-takanori]

あ、この件かな。
https://www.sunapro.com/react18-strict-mode/

(ログイン状態の管理とかは、特定のページに関する状態ではなく、アプリ全体の状態なので、redux とかで扱うべきなんでしょうね…。)

Answer 1

提示された useEffect の記述は

マウントしたときにログイン済みかどうかチェックして、ログイン済みであれば navigate

ではなく

マウントしたときに「『ログイン済み』に状態が変わるたびに毎回 navigate する」イベントハンドラを登録する

という動作になっています。

---

なので、useEffect 云々よりも、

• auth のどの機能を使うか検討する
• 「useRef でフラグを用意し、イベントハンドラの中とかで true にする。そのフラグが true のときには navigate しない」のような方法で暴発を防ぐのが適切かと思います。