onClickと無限レンダリング【React】

onClickとは

クリック時のイベントを実行する

export default function App() {
  return (
    <div>
      <button onClick={() => {console.log("hello")}}>
        hello
      </button>
    </div>
  );
}

例えばこうかくと
クリック時にonClick内の関数が実行される

export default function App() {
  return (
    <div>
      <button onClick={function () {console.log("hello")}}>
        hello
      </button>
    </div>
  );
}

もちろんこう書いても同じである

ではこう書くとどうだろうか

export default function App() {
  return (
    <div>
      <button onClick={console.log("hello")}>hello</button>
    </div>
  );
}

これは、読み込み時にコンソールに【hello】が表示される
クリックしても何も起こらない

この状態で再レンダリングをしてみる

export default function App() {
  const [count, setCount] = useState(0);
  const add = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={add}>add</button>
      <button onClick={console.log("hello")}>hello</button>
    </div>
  );
}

コンソールに【hello】再表示される

<button onClick={console.log("hello")}>hello</button>

つまりこう書くと、レンダリングするごとにhelloが呼ばれてしまうのだ

onClickと無限レンダリング

これがconsoleならまだいいが、onClickの中にこう書いてしまったとする

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={setCount(10)}>カウント10</button>
    </div>
  );
}

Error
Too many re-renders. React limits the number of renders to prevent an infinite loop.

無限レンダリングが発生してしまう

先ほど例で挙げたように、この書き方だと、レンダリング時にsetCountが呼ばれてしまうので

レンダリング=> setCount=> レンダリング=> setCount=> レンダリング....

という感じになってしまう

正しく、クリック時にイベントを実行するには

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(10)}>カウント10</button>
    </div>
  );
}

こう書くべきである