【React】useEffectで初回のみ(1回だけ)実行させる方法と実例

2023年1月1日React

ReactのuseEffectで初回のみ(1回だけ)実行させる方法を実例とともに紹介します。

ReactのuseEffectで初回のみ(1回だけ)実行させる方法

実例

こちらは、setIntervalを1秒に設定して時間を1秒ずつ進めるという単純なものです。
useEffectの中で書かないと時間の経過がおかしいことになります。
それは、setTimeという更新用関数が1秒ごとに実行されてtimeというstateが変化するので、コンポーネントが再レンダリングされてまたsetIntervalを実行してしまうためです。
このように、初回だけ実行したいというケースがあります。
以下がコードの説明です。

コードの説明

import { useEffect, useState } from "react";

const Sample = () => {
  const [time, setTime] = useState(0);
  useEffect(() => {
    window.setInterval(() => {
      setTime(prev=>prev+1);
    }, 1000)

  }, []);

  return (
    <>
      <p></p>
      <time>{time}</time>
      <span>秒経過</span>
    </>
  );
};

export default Sample;

useEffectは、第一引数に処理内容を記述した関数、第二引数に依存する配列を指定します。
初回だけ実行したい場合は、第二引数の依存する配列部分を[]というようにからの配列を指定するだけで可能です。
肝の部分は、初回だけ実行したい処理をuseEffectの関数で実行して、第二引数に空配列を指定するというポイントです。

ちなみに第二引数に空配列をいれないと、処理内容を記述した関数がuseEffectの外にある場合と同じ挙動をとるので、再レンダリングが発生して時間の進み方がおかしくなります。