useEfftct 第2引数を設定し、指定の値で発火させる方法

概要

初回マウント時と指定した値が変化したときのみuseEfftctを発火させる方法を書いていきます。

マウント時と第2引数の変化時のみuseEffectが発火させる方法

今回は第2引数にuseStateで作成した変数を入れることで

その値が変化した際に処理が走る様に書いていきます。

下記のコードでは第2引数に「count1」を設定したことにより、
初回のマウント時とcount1が変化したときのみuseEffectが発火。

import React, { useState, useEffect } from "react";
import classes from "./Counter.module.scss";

const Counter: React.FC = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  useEffect(() => {
    console.log(
      "初回のマウント時と第2引数に指定したcount1が変化した時のみuseEffectが発火"
    );
  }, [count1]);
  return (
    <div className={classes.root}>
      <div className={classes.buttonWrapper}>
        <span className={classes.buttonText}>カウント1</span>
        <button
          onClick={() => {
            setCount1((prevCount) => prevCount + 1);
          }}
        >
          {count1}
        </button>
      </div>

      <div className={classes.buttonWrapper}>
        <span>カウント2</span>
        <button
          onClick={() => {
            setCount2((prevCount) => prevCount + 1);
          }}
        >
          {count2}
        </button>
      </div>
    </div>
  );
};

export default Counter;

【結果1】

カウント1のボタンを押すと下記の様な処理結果が走る。

ブラウザ上

カウント1（ボタンの数値が+1ずつあがっていく）

コンソール上

初回のマウント時と第2引数に指定したcount1(ボタンを押し) が変化した時のみuseEffectが発火

【結果2】

- カウント2のボタンを押すとブラウザ上で下記のに様に表示される。

ブラウザ上

カウント2（ボタンの数値が+1されていく）

useEffectの第2引数に指定の値を設定した際のコードの解説

  useEffect(() => {
    console.log(
      "初回のマウント時と第2引数に指定した「Count1」が変化した時のみuseEffectが発火"
    );
  }, [count1]);

上記の最終行にあるようにuseEffectの第2引数に
[Count1]
を設定することで、初回マウント時と指定した変数が変化した際に、useEffectの処理が走る様になっている。

[]　・・・　初回のマウントのみ処理を走らせる処理が走る。
[Count1]　・・・　[]の中にCount1を設定することでCount1が
　　　　　　　　　 変化したときにuseEffectの処理も走る様になっている

参考にした動画

まとめ

今回は、第2引数に特定の値を指定する方法をご紹介いたしました。
[]の中に変数を入れることでその値が変化した際にuseEffectが発火する処理についてまとめました。
次回はクリーンナップ関数について投稿したいと思います。