Open5

[React]コンポーネントがアンマウントされた時だけクリーンアップロジックを実行したい

shirashira

[やりたいこと]
コンポーネントがアウンマウントされた時だけクリーンアップロジックを実行したい。

詳細

  1. 画面Aでデータの登録を行い、画面Bに遷移して画面Bに「登録が成功しました」的な通知を出す
  2. 画面Bから他の画面に遷移する時（コンポーネントがアウンマウントされた時）、通知を消したい

[困っていること]
useEffectのクリーンアップ処理を書くとセットアップロジック=>クリーンアップロジック=>セットアップロジックの順番に実行される。
マウント時は実行したくないが、Strict Mode がオンの開発環境では 上記挙動になる。上記やりたいこと詳細の1のタイミングで通知が消えてしまう。
コンポーネントがアンマウントされていないのにクリーンアップロジックが実行される

[調べたこと]
useEffectのクリーンアップ処理はセットアップ処理で行ったことを停止ないし元に戻すという前提がある。

[NextAction]
useEffectのクリーンアップ処理でやるのを諦めて、他の方法を検討してみるかなぁ。。

shirashira

useEffctを使うのは良いとして、useEffectのクリーンアップ処理で発火させるのをやめれば良さそう。

PagesRouterだったらこんな感じで書けそう。

export default function Settings() {
  const router = useRouter()

  useEffect(() => {
    router.event.on("routeChangeStart", "通知を削除するメソッド")

    return () => {
      router.event.off("routeChangeStart", "通知を削除するメソッド")
    };
  }, []);

  return ( ... );
}

AppRouterを使っている場合は events がないので上記の書き方はできない。

shirashira

Next.js App Router でのフォーム離脱防止にあるように、clickイベントに対してコールバックを指定し、リンクをクリックして別のページに移動しようとしたら通知を消すってアプローチならうまくいきそう。

ただ、router.push でページ遷移した場合は動かないということになる。
router.push 時に関しては events の開発を待つって方針にする？