【React】useEffectを非同期にしてfetchしたデータをuseStateのset関数で更新する

個人の備忘録です。

React HooksのuseEffectを使っていて、useEffect内で外部からfetchしてきたデータをuseStateのset関数で更新しようとした時のメモ。

環境

• React.js v17.0.2

結論

• useEffect に直接 async はつけれない
  • Promiseを返してしまうから
• useEffect内で非同期関数を作る

例

// ❎
useEffect(async () => {
  const res = await fetchData();
  setValue(res);
}, []);

// 🟢
useEffect(() => {
  // 非同期関数の作成
  const fetchFunction = async () => {
    const res = await fetchData();
    // set関数で値の更新
    setValue(res);
  };
  // 非同期関数の実行
  fetchFunction();
}, []);