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

はじめに

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

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

useEffectの引数

2つあります。

useEffect(setup, dependencies?)

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

クリーンアップ関数とは

公式を引用します。

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

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

1. 依存配列の値が変更され、setup関数が実行される前

2. コンポーネントが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回目になりますが、クリーンアップ関数が実行されるのは下記タイミングです。

1. 依存配列の値が変更され、setup関数が実行される前

2. コンポーネントが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 が実行されます。

おわりに

シンプルな仕組みですが、めちゃくちゃ便利ですよね。
検索するときのデバウンス処理もクリーンアップ関数により実装しています。

このブログがuseEffectをさらに理解することに繋がればいいなと思います！