【React Hooks】useEffectとは？概念や使い方を徹底解説！

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

import { useEffect, useState } from "react";

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

  // [isRunning]の値が変更されたときに実行する
  useEffect(() => {
    let interval = null;
    if (isRunning) {
      console.log("start");
      interval = window.setInterval(() => {
        console.log("update");
        // time を + 1 していく
        setTime((prev) => prev + 1);
      }, 1000);
    }
    // コンポーネントが削除されたときに実行される
    // setIntervalを止めるために記述する
    return () => {
      window.clearInterval(interval);
      console.log("end");
    };
  }, [isRunning]);

  // スタートとストップを制御する
  const toggle = () => {
    setIsRunning((prev) => !prev);
  };

  // タイマーをリセットする
  const reset = () => {
    setTime(0);
    setIsRunning(false);
  };

  return (
    <>
      <h3>
        <time>{time}</time>
        <span>秒経過</span>
      </h3>
      <div>
        <button onClick={toggle}>{isRunning ? "ストップ" : "スタート"}</button>
        <button onClick={reset}>リセット</button>
      </div>
    </>
  );
};

export default Example;