Zenn
✨

useEffect で API通信 をするときの注意点

2023/07/29に公開
JavaScript
Next.js
React
TypeScript
frontend
tech

結論

useEffect に渡すコールバック関数を Promise にしてはいけない

理由

useEffect 内のコールバック関数の戻り値はクリーンアップ関数を設定しないといけないから

NGな書き方❌

// 理由 : useEffect の引数に非同期関数を渡しているため
// こうすると、useEffect の返り値の型が Promise になってしまう
useEffect(async () => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
  console.log(response);
}, []);

OKな書き方①✅

非同期関数を内部で定義して呼び出す

useEffect(() => {
  async function fetchTodos() {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
    console.log(response);
  }

  fetchTodos();
}, []);

OKな書き方②✅

非同期関数を外部で定義して呼び出す

const fetchTodos = async () => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
  console.log(response);
}

useEffect(() => {
  fetchTodos();
}, []);

OKな書き方③✅

即実行関数で関数の定義・実行を同時に実施する

useEffect(() => {
  (async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
    console.log(response);
  })()
}, []);

参考文献

【React Hooks】useEffectのよくある間違い3選とそれらを回避する方法

Discussion