5分で読むReact豆知識 | 入門 | 第10回: OnClickの即時関数に注意

はじめに

このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。

進捗管理には「いいね」か「ブックマーク」がお勧め
さらに僕のモチベーションアップになります！よろしくお願いいたします！

シリーズ一覧はこちら

OnClickの即時関数に注意

このボタンタグ、onClickについている関数はいつ動くと思いますか？

<button onClick={handleClick()}>ボタン</button>

実はレンダリングされてすぐなんです。

{/*OK:渡すことでイベントハンドラ関数がクリックに反応する*/}
<button onClick={handleClick}>ボタン</button>
{/*NG：()があるとレンダー後すぐに発火する*/}
<button onClick={handleClick()}>ボタン</button>
{/*アロー関数で定義するのも可能*/}
<button onClick={() => {alert('test2')}}>ボタン</button>

これは{}で囲われたものはJavaScriptとして扱われるため、()をつけると関数実行と認識し即時実行されるためです。
イベントハンドラへ関数定義を渡すときは()をつけないよう気をつけましょう。

参考サイト

より詳しく学びたい方はこちら