【React初心者向け】useEffectクリーンアップ関数

投稿日: 2025年02月24日

Tips

学習振り返り

要約

useEffectのクリーンアップ関数は、依存配列の変更時やコンポーネントのアンマウント時に実行される特別な関数である。
タイマーの解除などの処理を行うことで、前の状態による影響を排除し、新しい処理を適切に行うことができる。
この仕組みを利用して、例えばクリックや検索時のデバウンス処理を簡潔に実装することができる。

はじめに

useEffectのクリーンアップ関数について書きます。
初級者向けと言える内容だと思います。
しっかり理解せずにAIに言われるがまま使っている方ももしかしたらいるかもと思ったので、いいねの連続タップの時の処理を元に流れの解説をしてみます。

心当たりのある方はここで理解していってください！！

useEffectの引数

2つあります。

useEffect(setup, dependencies?)

setupはオプションでクリーンアップ関数を返すことが出来ます。

クリーンアップ関数とは

公式を引用します。

コンポーネントが初めて DOM に追加されると、React はセットアップ関数を実行します。依存配列 (dependencies) が変更された再レンダー時には、React はまず古い値を使ってクリーンアップ関数（あれば）を実行し、次に新しい値を使ってセットアップ関数を実行します。コンポーネントが DOM から削除された後、React はクリーンアップ関数を最後にもう一度実行します。

つまり、クリーンアップ関数が実行されるのは

依存配列の値が変更され、setup関数が実行される前
コンポーネントがDOMから削除された時(アンマウント時)

上記のタイミングで実行される特別な関数と言えます。

コード例

import { useEffect, useCallback, useState } from "react";

export const Like:React.FC = () => {
　//押されたいいね数をカウントするステート
  const [tempLikes, setTempLikes] = useState(0);

  const fetcher = useCallback(async () => {
    console.log("ここでリクエスト送信処理");
  }, [tempLikes]);

  useEffect(() => {
    if (tempLikes === 0) return;

　　//500ms後にfetcher実行
    const timeoutId = setTimeout(fetcher, 500);

　　//クリーンアップ関数
    return () => {
　　　//タイマー解除
      clearTimeout(timeoutId);
    };
  }, [fetcher, tempLikes]);

  const handleClick = () => {
　　//クリックの度にtempLikesをインクリメント
    setTempLikes(prev => prev + 1);
  };

  return <button onClick={handleClick}>Like</button>;
};

解説

これ見てわかったら苦労せんわという方のために詳しく流れを見ていきます。

2回目になりますが、クリーンアップ関数が実行されるのは下記タイミングです。

依存配列の値が変更され、setup関数が実行される前
コンポーネントがDOMから削除された時(アンマウント時)

👧　♡クリック(1回目)

setTempLikes(prev => prev + 1);

➡ これにより tempLikes が 0 → 1 に変わる
➡ useEffect の依存配列 tempLikes の値が変化するので、セットアップ関数が実行
➡ 500ms後に fetcher が実行されるタイマースタート！

👧　♡クリック(2回目)

setTempLikes(prev => prev + 1);

➡ これによりtempLikes が 1 → 2 に変わる
➡ useEffect のセットアップが実行される前に、クリーンアップ関数が走る！
➡ 最初にセットされた 0→1 の時のタイマーが解除される
➡ 新しく tempLikes = 2 に対する 500msのタイマーが再セット

この繰り返しです！

500ms未満のクリックが続いている間は、前のタイマーがどんどん解除されます。
つまり、クリックを続ける限り fetcher は実行されません。

500ms間クリックが止まるとその時の tempLikes に対して fetcher が実行されます。