React チュートリアル イベントハンドラ関数の呼び出しと渡すだけの違い

躓いた部分

イベントに応答する
コンポーネントの中でイベントハンドラ関数を宣言することで、イベントに応答できます：

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }
  
return 
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

onClick={handleClick} の末尾に括弧がないことに注意してください！ そこでイベントハンドラ関数を呼び出すわけではありません。渡すだけです。ユーザがボタンをクリックしたときに、React がイベントハンドラを呼び出します。

どこで躓いたか

関数を呼び出すわけではありません。渡すだけです。
→呼び出すタイミングが違う、、ってこと！？

具体例を考えてみた

括弧ありのケース: onClick={handleClick()}
Aさんが、Bさんに「〇〇さんに電話をかけて」と頼む。
Bさんはその場で電話をかけてしまった。

問題点:
Aさんが本当は「必要になったら電話してほしい」と言いたかったのに、Bさんは「頼まれた瞬間」に電話をかけてしまう。
結果、Aさんが意図したタイミングではなかった。

学び：
括弧を付けるとReactは「即座に」関数を実行する

括弧なしのケース: onClick={handleClick}
Aさんが、Bさんに「必要になったら〇〇さんに電話して」とメモを渡した。
Bさんはそのメモ通り、タイミングが来たとき（例えば〇〇さんから連絡が必要になったとき）に電話をかけた。

学び：
括弧を付けずに関数を渡すと、「必要なタイミング（この場合はクリックされたとき）に」関数を実行する

簡単にまとめると

onClick={handleClick()} は、「電話をかける方法を準備せず、その場で電話をかけてしまう」こと。
onClick={handleClick} は、「電話をかける方法（関数）を準備する」こと。

自分がどのタイミングで呼び出したいのかを意識することが大切