ReactのuseEffect内でaddEventListenerをした後にreturnでremoveEventListenerを実行する理由

useEffect内でreturnでremoveEventListenerを実行する理由

useEffectフック内でaddEventListenerを使用する場合、そのイベントリスナーをクリーンアップする必要があります。
通常、コンポーネントがマウント解除される時にイベントリスナーを削除しないと、メモリーリークや予期しない動作が発生する可能性があります。
そのため、useEffectのクリーンアップ関数でremoveEventListenerを実行することが推奨されています。

具体的には、以下のような形になります。

useEffect(() => {
  const handleEvent = (event) => {
    // イベントを処理するロジック
  };

  // イベントリスナーを追加する
  document.addEventListener('eventName', handleEvent);

  // クリーンアップ関数でイベントリスナーを削除する
  return () => {
    document.removeEventListener('eventName', handleEvent);
  };
}, []); // 第二引数が空配列の場合、マウント時にのみ実行される

このようにすることで、コンポーネントがアンマウントされた時点で、removeEventListenerが呼ばれてイベントリスナーがきちんと削除されます。

クリーンアップ関数が呼ばれるタイミング

ReactのuseEffectフックにおけるクリーンアップ関数は、以下の状況で呼び出されます：

1. コンポーネントがアンマウントされた時
コンポーネントが画面から削除された時点で、クリーンアップ関数が実行されます。
これにより、リソースの解放や後始末の処理が行われます。

2. 依存性配列の要素が変化した時
useEffectの第二引数として渡す依存性配列が変更された場合、前回のエフェクトの実行直前にクリーンアップ関数が呼び出されます。
これにより、新しいエフェクトが実行される前に、以前のエフェクトのクリーンアップが行われます。

3. エフェクト自体が再実行される前
エフェクト自体が再実行される前に、前回のエフェクトのクリーンアップ関数が呼び出されます。
これにより、新しいエフェクトが実行される前に、リソースの解放や前回のエフェクトの後始末が行われます。

これらのタイミングによって、useEffectで管理しているリソースの正確な管理が可能になります。