【React】useEffect

import { useEffect, useState } from "react";

const Example = () => {
  const [time, setTime] = useState(0);

  // useEffect(() => {
　　// 1秒ごとにsetTime関数を呼び出し、その度に再レンダリングされてしまい、秒カウントがおかしい挙動となってしまう
　　// コンポーネントが呼ばれた時に1回だけ呼びたい場合はuseEffectのコールバック関数内で呼びたい処理を記述する
    window.setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);
  // }, []);

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

export default Example;

import { useEffect, useState } from "react";

const Example = () => {
  const [time, setTime] = useState(0);

  // 依存配列が空の場合は、依存するStateがないので、コンポーネントが生成されたときのみ実行される
  // 依存配列をかき忘れてしまうと、useEffectの挙動は実現できないので忘れずに書く
  useEffect(() => {
    window.setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);
  }, []);

 // 1秒ごとにtimeが更新されるたびに呼ばれる
  useEffect(() => {
    console.log("TEST");
  }, [time]);

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

export default Example;

import { useEffect, useState } from "react";

const Example = () => {
  const [isDisp, setIsDisp] = useState(true);

  return (
    <>
      // isDispがTrueの場合にタイマーを表示
      {isDisp && <Timer />}
      <button onClick={() => setIsDisp((prev) => !prev)}>トグル</button>
    </>
  );
};

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let intervalId = null;
    intervalId = window.setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);

    return () => {
      // コンポーネントが削除された際の処理。
　　　 // 今回は秒カウントコンポーネントがアンマウントされた際にカウントをストップする。
　　　 // この処理がないとコンポーネントが削除された際にも裏で永遠にカウントされてしまう 
      window.clearInterval(intervalId);
    };
  }, []);

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

export default Example;