React useEffect 再レンダリング

useEffect関数の第2引数に空の配列を渡すと、初回レンダリング時にのみ実行される。

import { useEffect, useState } from "react";
import "./style.scss";

export const Button = (props) => {
  const [isClicked, setIsClicked] = useState(false);
  const [isClicked2, setIsClicked2] = useState(false);
  const { bgColor, children } = props;
  const OnClickFun = () => {
    console.log("クリックされたよ");
    setIsClicked(!isClicked);
  };
  const OnClickFun2 = () => {
    console.log("クリック2されたよ");
    setIsClicked2(!isClicked2);
  };

  // useEffect関数の第2引数に空の配列を渡すと、初回レンダリング時にのみ実行される
  useEffect(() => {
    console.log("useEffectが実行されました");
  }, []);

  //   マウントされたときの最初の一回目と監視対象のisClicked2が変化した時に実行される
  useEffect(() => {
    console.log("useEffectが実行されました");
  }, [isClicked2]);

  const style = { backgroundColor: bgColor, color: "white" };

  return (
    <>
      <button style={style} onClick={OnClickFun}>
        {children}
      </button>
      <button style={style} onClick={OnClickFun2}>
        {children}
      </button>
      {isClicked && <p>クリックされたら表示するテキスト</p>}
      {!isClicked && <p>閉じたよ</p>}
    </>
  );
};