React　onClickの発火発火タイミングについて

Posted at 2024-12-15

アプリ開発中onClickの発火タイミングについて理解不十分により意図しない挙動がされたため、注意点を共有させていただきます。

.jsx

const onClickDelete = () => {
  console.log("削除ボタンがクリックされました");
};

<button onClick={onClickDelete}>削除</button>

上記だとクリックしないと発火しません。

.jsx

const onClickDelete = (index) => {
  console.log(`削除ボタンがクリックされました: ${index}`);
};

<button onClick={onClickDelete(1)}>削除</button>

上記だとボタンが生成された時点で発火してしまいます。

違いは（）の位置。onClickDeleteという関数に()が付いているとonClickDeleteをすぐ実行してonClickに結果を渡すとReactが解釈してしまうため、クリックとは関係なくonClickDeleteが実行されてしまいます。

.jsx

const onClickDelete = (index) => console.log(`削除されました: ${index}`);

// 無名関数を渡している
<button onClick={() => onClickDelete(1)}>削除</button>

上記のように無名関数（アロー関数）を使用すれば関数を定義しているだけになり、onClickDeleteに（）が付いていても発火はクリックした時だけになります。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼