Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

reactのイベントハンドラーにはasync関数を設定してもよい

意外と知られてないというか、なんかあんまやってる人いない気がしたので

(ちなみに、本当に async 関数が必要なパターンは実は少なくて、ほとんどの場合はアンチパターンなのでやめたほうがよいです。 別の方法で実装できるならそちらにしましょう)

実際にasync関数を設定する例がこちらになります (myConfirm は confirm の promise 版)

const button = () => (
  <button onClick={async () => {
    if (await myConfirm('本当に削除しますか?')) {
      deleteItem();
    }
  }}>
    delete
  </button>
);

こんな感じで、async/await をそのまま設定することもできます。