カスタムフックの内部でuseEffectを使う理由

Question

下に挙げたコードはfirebase authのログインユーザーを取得するカスタムフックなのですが、フックの内部でuseEffectが使われています。

useEffectについてcomponentDidMountとcomponentDidUpdateとcomponentWillUnmountを関数コンポーネントで表現する手段として理解しているのですが、hooksを使う場合にこのライフサイクルがイメージできず、結局このuseEffectが何をしているのかわかりません。

一応useEffectを取り除いても動作するのですが、その場合はunlistenが走らないということになるのでしょうか？

export default function useAuthentication() {
  const [loginUser, setLoginUser] = useState(null);

  useEffect(() => {
    const unlisten = auth.onAuthStateChanged(loginUser => {
      loginUser ? setLoginUser(loginUser) : setLoginUser(null);
    });
    return () => {
      unlisten();
    };
  });

  return loginUser;
}

Answer 1

useEffectについてcomponentDidMountとcomponentDidUpdateとcomponentWillUnmountを関数コンポーネントで表現する手段として理解

一応useEffectを取り除いても動作するのですが、その場合はunlistenが走らないということになるのでしょうか？

概ねその認識で合っていますが、この書き方だとクラスコンポーネントでいうところのcomponentWillUnmount以外のタイミングでもunlisten();が走ってしまいます。
同じ原理でrenderの度にauth.onAuthStateChanged...も走っていると思います。

• Qiita | useEffectフックのしくみ

上記でもある通り、componentWillUnmountなどのライフサイクルと同じタイミングでイベント発火したい場合はuseEffectの第二引数に空配列[]を指定するとよいです。

Comments

[maskmelon]

回答くださりありがとうございます。
ご指摘の通り、空配列を第二引数に入れると再レンダリング時にuseEffectが実行されないことを確認することができました。
一点確認したいのですが、カスタムフックのコンポーネントは呼び出し元のコンポーネントと同じタイミングでレンダリングやアンマウントされるという理解で正しいでしょうか？

[nekoniki]

> 一点確認したいのですが、カスタムフックのコンポーネントは呼び出し元のコンポーネントと同じタイミングでレンダリングやアンマウントされるという理解で正しいでしょうか？

基本はそうだと思います。
補足になりますが、memo等を絡めてパフォーマンスを上げている(無駄な再描画をかけないようにしている)場合はその限りではないです。

[maskmelon]

勉強になりました。丁寧な回答をくださりありがとうございました。