useEffect内でawait fetchを使うやり方

React.jsのuseEffect内でasync,awaitを使った関数を実行する方法を紹介します。 今回は猫に関しての情報を扱うAPIからデータを引っ張りそれを表示するプログラムを書いて説明します。

やり方は簡単でasyncで定義した関数をuseEffectの中で呼び出してあげるだけです。 今回はfetchCatFactsDataというasyncで定義した関数を定義して、 それをuseEffect内で呼び出しを行なっています。

このようにasync定義した関数を単純にuseEffect内で呼び出してあげることで、 useEffect内でもasync,awaitを使った関数を実行することができます。

import React, { useState, useEffect } from 'react'

const fetchCatFactsData = async (setData) => {
  const res = await fetch("https://catfact.ninja/facts");
  const data = await res.json()
  setData(data.data)
}

const Home = () => {
  const [cats, setCatsData] = useState()

  useEffect(() => {
    fetchCatFactsData(setCatsData)
  }, [])

  return (
    <>
    {cats && cats.map((cat,i) => <p key={i}>{cat.fact}</p>)}
    </>
  )
}

export default Home

また、fetchの関数が大きくなる場合には、 下記のようにしたfetchしてthenを使う方がベターです。

そうすると、fetchの責務とうまく分離して使うことが可能になります。

import React, { useState, useEffect } from 'react'

const fetchCatFactsData = async () => {
  const res = await fetch("https://catfact.ninja/facts");
  const data = await res.json()
  return data
}

const Home = () => {
  const [cats, setCatsData] = useState()

  useEffect(() => {
    fetchCatFactsData().then(catsData => setCatsData(catsData)
  }, [])

  return (
    <>
    {cats && cats.map((cat,i) => <p key={i}>{cat.fact}</p>)}
    </>
  )
}

export default Home

参考: React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

参考: ComponentDidMountをuseEffectで代用する方法