【React】onClick内の関数の書き方の違い

結論：ほとんど違いはなし

buttonタグ内にあるonClickの書き方はどちらでも可

違いとしては

• onClick={handleClick}の書き方の場合
  • コンポーネントが再レンダリングされても関数は再生成されない
• onClick={() => handleClick()}の書き方の場合
  
  • コンポーネントが再レンダリングされる度にアロー関数が再生成される

基本は前者の書き方で、引数を受け取りたい場合は後者の書き方がよい

const handleClick = () => {
  console.log("clicked")
}

return (
  <div>
    <button>
      // 下記はどちらでも可
      onClick={handleClick}
      onClick={() => handleClick()}
    >
      hgoe
    </button>
  </div>

追記(2024/10/20)

mapでループなどしている場合は、前者の書き方だとそこを通る度に関数が実行されてしまう
下記の場合、alertでidが1, 2, 3...とループで表示されてしまう

const onClickDelete = (id) => {
  alert(id);
}

{todos.map((todo) => (
  <li key={todo.id}>
    <p>{todo.text}</p>
    <button onClick={onClickDelete(todo.id)}>削除</button>
  </li>
))}

そのため、アロー関数型で書く

- <button onClick={onClickDelete(todo.id)}>削除</button>
+ <button onClick={() => onClickDelete(todo.id)}>削除</button>

参考

• 【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 58. タスクの削除機能 | Udemy