【React】そのUseEffect, 本当にcleanup(クリーンアップ)できてますか？

はじめに
対象読者
cleanup(クリーンアップ)とは？
cleanup(クリーンアップ)ができていない実装
- なぜできていないのか
終わりに

はじめに

こんにちは、株式会社TOKOSのツキヤです！
今回は、ReactのuseEffectを使う時に重要になるcleanup(クリーンアップ)について、簡単な説明とやってしまいそうなミスへの対策方法を書きます！
自分も1度ハマったので、誰かの参考になれば幸いです🙌

対象読者

Reactのcleanupについて知りたい方
自分のcleanupが正しくできているか気になっている方

cleanup(クリーンアップ)とは？

まずはざっくりとcleanupについて説明します！

cleanupとは簡単に言うと「useEffectの中でreturnする関数」のことです！
例えば下記コードのような形です

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用の処理（例：イベントリスナーの設定）
    const handleResize = () => {
      console.log('ウィンドウがリサイズされました！！');
    };
    window.addEventListener('resize', handleResize);

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>ウィンドウがリサイズされるとcosole.logが出力されるよ</div>;
}

上記のuseEffect内のreturnの部分です！
useEffect内で宣言したイベントリスナーをreturn内でremoveしています。
これにより、このMyComponentというコンポーネントがアンマウントされる時に一緒にイベントリスナーも消してくれるという感じです✨

逆に言うと、このcleanupが無い場合は、このコンポーネントがマウントされる度に同じイベントリスナーがどんどん追加されていき、重くなったり意図しない挙動になったりします🥲

ツキヤ

今回の例で言うと、1回のリサイズでconsole.logが何回も出てしまう感じだね!

なので、基本的にはuseEffectを使う時はcleanupをする必要があるかは常に検討すべきです！

以下の記事が参考になります、詳しく知りたい方は見てみてください。

参考

過激派が教える！　useEffectの正しい使い方

Zenn

cleanup(クリーンアップ)ができていない実装

上記の例は、cleanupができている実装です！
上記のコードを再掲します。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用の処理（例：イベントリスナーの設定）
    const handleResize = () => {
      console.log('ウィンドウがリサイズされました！！');
    };
    window.addEventListener('resize', handleResize);

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>ウィンドウがリサイズされるとcosole.logが出力されるよ</div>;
}

それでは、cleanupができていない実装例はこちらです!

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    window.addEventListener('resize', () => {
      console.log('ウィンドウがリサイズされました！！');
    });

    // ここがクリーンアップ(関数)
    return () => {
      window.removeEventListener('resize', () => {
        console.log('ウィンドウがリサイズされました！！');
      });
    };
  }, []);

  return <div>ウィンドウがリサイズされるとcosole.logが出力されるよ</div>;
}

handleResizeとして宣言していた部分をaddEventListenerとremoveEventListenerの第二引数内に直接アロー関数として全く同じものをそれぞれ記述した形になります。

一見同じ挙動になりそうですね🤔

なぜできていないのか

これについては、関数は同じ記述をしたとしても、違うものとしてみなされるためです！
分かりやすい例をコードとして記載します!

const foo = 1;
const bar = 1;
console.log(foo === bar) // => true が出力される✅


const hoge = () => { console.log('ウィンドウがリサイズされました！！') };
const huga = () => { console.log('ウィンドウがリサイズされました！！') };
console.log(hoge === huga) // => false が出力される⛔️

上記のような結果になるのです🧐

1や”文字列” のようなプリミティブな値は変数に格納しても等価演算子(==)でその値同士が同じであればtrueになります。
一方、関数やオブジェクト(ex. { name: “ツキヤ” }) は全く同じ値を変数に格納しても、等価演算子で比較するとfalseになります！

これを説明するためには、JavaScriptのやや踏み込んだ理解が必要になるので割愛します🙏
詳しくはこちらの書籍等を参考にしてみてください。

useEffectの話に戻ると、addEventListenerとremoveEventListenerのそれぞれで全く同じ関数を記述したとしても、先程の例から分かるように同じ関数としてみなされないです。
なので、全く違う関数をremoveEventListenerしようとしていることになり、うまくremoveEventListenerができないのです!!

そこで、初回の例のようにuseEffect内であらかじめ変数に関数を格納しておき、その変数をaddEventListenerとremoveEventListenerのそれぞれの第二引数に渡すことで意図通りのcleanupとなります✨