はじめに
基本的なことなのですが、アプリ開発をしているときに何度か混乱して間違えてしまい、解決に時間を要することがあったのでここにまとめておきたいと思います。
何かというと、よく出てくるイベントハンドラのonClickで定義した関数は以下の3つの定義方法があります。
(1) <button onClick={handleClick()}>クリック</button>
(2) <button onClick={handleClick}>クリック</button>
(3) <button onClick={() => handleClick()}>クリック</button>
この違いを説明できますか？
(1)について
上記3つの中で(1)は即座に実行がされてしまいます。
ですので、ページを再読み込みすると関数が実行されて戻り値がイベントハンドラに渡されてしまいます。
なぜかというと、JavaScriptのルールとして、関数名の後に括弧をつけると、それは関数を即座に「実行」するという命令になるからです。
はい、続きを書かせていただきます：
(2)について
(2)は関数の参照を渡しているだけなので、クリックされるまで実行されることはありません。
新しい関数を作成する必要がないためメモリ効率が良く、引数を渡す必要がない場合はこちらの書き方が推奨されると思います。
デメリットとしては、引数が渡せないと言う部分になります。
(3)について
アロー関数で関数をラップしている形になります。
この方法では、レンダリングのたびに新しい関数が作られてしまうので、(2)と比べると若干パフォーマンスが落ちてしまいます。
ただ、引数を渡す場合は基本的にこちらの書き方が必須になってくると思います。
<button onClick={() => handleClick(123)}>クリック</button>
おわりに
開発をしている中で(1)の書き方をしてonClickのイベントハンドラを発火させても何も起こらなかったりり、(2)と(3)の違いを忘れてしまってどのように選択すべきか迷うことが何度かありました。
この記事の内容を見返して知識を定着させていきたいと思います。
皆様の参考になれば幸いです！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼