useState(react)の無限ループが起こる仕組みがわかりません

Question

質問の内容としてはタイトルの通りです。
具体的には以下の通りです。

reactのuseStateで以下のように記述をすると無限ループが起きてしまいます。

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>{count}</p>
      <button onClick={setCount(count + 1)}>+1</button>
    </>
  );
};

無限ループが起きる仕組みとしては以下のように認識をしております。

1. Reactはstateが更新された時に再レンダリングが起きる。
2. 上記のコードの場合、setCount関数がonClickをした時ではなく、マウント時に実行されてしまう。
3. そのためマウント時にsetCountが実行→count(state)が更新→再レンダリングが発生→setCountが実行→count(state)が更新→・・・この繰り返しによって無限ループが起きる。

解決策として、下記のようにonClick時の関数にアロー関数を用いる事で解決できることはさまざまな記事に書かれているのですが、なぜアロー関数にすると解決されるのかがわかりません。

<button onClick={() => setCount(count + 1)}>+1</button>
                 

具体的には、自分の認識の２に書いた「setCount関数がonClickをした時ではなく、マウント時に実行されてしまう。」の部分が理解できていません。
なぜ、アロー関数で記述をするとonClick時にsetCount関数が実行されるのでしょうか？

わかる方いましたら、教えてください。
よろしくお願いいたします。

Answer 1

具体的には、自分の認識の２に書いた「setCount関数がonClickをした時ではなく、マウント時に実行されてしまう。」の部分が理解できていません。

onClick={setCount(count + 1)}のように書くと、JSXへ渡す前にsetCount(count + 1)の評価が行われます。

一方で、onClick={() => setCount(count + 1)}は関数リテラルであって、渡す時点ではsetCount(count + 1)は実行されません。

Comments

[maisumakun]

関数を引数として渡した場合、渡した瞬間には関数が実行されません。

通常、「条件によって実行されるかどうかが決まる」「複数回実行される」「非同期に実行される」要な場合に関数を渡して、渡された側が適切なタイミングで関数を実行します。