React（TypeScript)にESLintを導入して、クリックイベントなどで非同期処理を入れた際に
@typescript-eslint/no-misused-promises
が現れました。
こちら、なぜこんな指摘が出るのかも含めて対処法を残します。
※こちらはTypescriptのESLintを導入してないケースでは注意されないと思います。
結論
◆Async/Await と .then() を使い分けよう
なぜ指摘されるのか？
例えばデータをフェッチしてくる下記コードをクリックイベントで実行しようとして
ESLintが、{reload}の箇所で「ここはPromiseあかんで」と指摘します
なぜなら、
イベントハンドラにはvoidを返す関数を入れるように定義されているから。
Promiseはあくまでプロミスを返しているため
ESLintのチェックに引っかかります。
Q.ではどうするか？
A. ならば.then()だ
voidを返す形にすれば指摘も消えます。
それにこれくらいなら可読性の影響もないと判断しています。
ちなみに.catch()のなかにalert()入れてる件は、今回は見逃してください。
いちおう関数コンポーネント内の定義なのでギリOKかと思いますが、
alert()を使うならこの関数ではstringを返して
クリックイベント関数の返り値をvoid型にするのが良い気がしています。
こちらのディスカッションでも討論されてましたが、void演算子をつける案やラッパーを作った方もいました。
まとめ
個人的には、サーバーレスを使うと相手の関数自体がPromiseを返すこともあるため、
可読性がいいからと、一つ覚えのAsync/Awaitにならず
状況に応して.then()を使える柔軟さを身に付けておいた方が良いと思いました。