ReactでuseEffect内でasync関数を使う方法

useEffectは通常、Reactでデータフェッチが行われる場所です。データフェッチとは非同期関数を使用することを意味しますが、useEffect内でそれらを使用するのは思ったほど単純ではないかもしれません。詳細については読み進めてください！

間違った方法

useEffectでデータフェッチを行うには間違った方法が1つあります。以下のコードを書くと、リンターが警告を発します！
-------------------------------------------
| リンターを使っていますよね？？ |
-------------------------------------------

// ❌ これはやってはいけません
useEffect(async () => {
const data = await fetchData();
}, [fetchData])

ここでの問題は、useEffectの最初の引数は、何も返さない（undefined）か、関数（副作用をクリーンアップするための）を返す関数であるべきだということです。しかし、async関数はPromiseを返し、それを関数として呼び出すことはできません！これは単にuseEffectフックが最初の引数に期待するものではありません。

それでは、useEffect内で非同期コードをどのように使うのでしょうか？

通常の解決策は、データフェッチのコードをuseEffect自体の中に書くことです：

useEffect(() => {
// データフェッチ関数の宣言
const fetchData = async () => {
const data = await fetch('https://yourapi.com');
}
// 関数の呼び出し
fetchData() // エラーが発生した場合は必ずキャッチする .catch(console.error);
}, [])

まとめ：useEffectを直接非同期にすることはできません。なぜなら、同期的なクリーンアップの戻り値を期待しているからです。代わりに、エフェクトブロック内で非同期関数を宣言し、呼び出してください。

私はNmesoma Ononogboです。ビジネスに力を与え、優れたユーザー体験を生み出す革新的なソリューションを構築するソフトウェアエンジニアです。また、最新技術で可能な限界を常に押し広げています。