useEffect()の中で非同期処理を書く

React 16.8 から追加された Hooks API の useEffect() 。

useEffect() のコールバックに async 関数を与えたくなるけど、それは禁止されている。TypeScript で書いているとわかるが、useEffect() のコールバックに与える関数の返り値は、undefined か cleanup 用関数なので。

そこで、useEffect() のコールバック内で async / await を使いたくなったらこう書く。

useEffect(() => {
  ;(async () => {
    // 非同期処理
  })()
  return () => {
    // cleanup 処理
  }
})

同じ悩みの Stack Overflow ↓