React コンポーネントに関数を渡すときの書き方による違い

2021年5月24日

ボタンコンポーネントにonClick時に実行したい関数を渡す場合は、以下のように書くことができます。

<button onClick={this.handleClick} />

<button onClick={() => this.handleClick()}

どちらも同じ結果になりますが、下で書く場合はレンダーのたびに新しい関数が作成されるので、React内の最適化がうまく動作しなくなる可能性があります。

パフォーマンスが気になったら上の書き方にして試してみると良いです。

一方で、下の書き方の利点は以下のように handleClick にパラメータを渡すことができることです。

<button onClick={() => this.handleClick(id)}

参考:　https://ja.reactjs.org/docs/faq-functions.html