React 19はuseEffect, useStateではなくSuspense, useでfetchする

React 18でデータをfetchで取得するコード

Reactでfetchでデータを取得するコードはReact 19より前の古いバージョンでは以下のようなuseEffect, useStateを使用した古い書き方がよく使われています。

App.tsx

import { useEffect, useState } from 'react'

export default function App() {
  const [status, setStatus] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchMessage = async () => {
      const res = await fetch('https://dummyjson.com/test?delay=1000')
      const data = await res.json()
      setStatus(data.status)
      setLoading(false)
    }

    fetchMessage()
  }, [])

  if (loading) {
    return <h1>⌛ Loading status...</h1>
  }

  return <h1>status: {status}</h1>
}

※ React 18からはSuspenseが使えますが、現在もuseStateを使用しているプロジェクトが結構あります。

ReactでuseEffect, useStateを使用してfetchするサンプル

React 19でデータをfetchで取得するコード

React 19からはuseが使えるので、Suspenseとuseを使えば以下のように完結にfetchのコードが書けます。

App.tsx

import { Suspense, use } from 'react'

const fetchMessage = async () => {
  const res = await fetch('https://dummyjson.com/test?delay=1000')
  const data = await res.json()
  return data.status
}

const statusPromise = fetchMessage()

function Message() {
  const status = use(statusPromise)
  return <h1>status: {status}</h1>
}

export default function App() {
  return (
    <Suspense fallback={<h1>⌛ Loading status...</h1>}>
      <Message />
    </Suspense>
  )
}