react19のuseTransition触ってみる

## react18のuseTransitionとの変更点

const [isPending, startTransition] = useTransition()

• startTransitionに渡す関数が同期処理から非同期処理に変更。

### useTransitionを使わない場合のfetch（useStateで切り替える場合）

export const Prefectures = () => {
  const [postedData, setPostedData] = useState('')
  const [isPending, setIsPending] = useState(false)

  const onClick = async () => {
    setIsPending(true)
    const apiKey = 'uaz4eakpx2hfYN2P9Mvrp62GPOWuwOeUEWw21sao'
    const response = await fetch(
      'https://opendata.resas-portal.go.jp/api/v1/prefectures',
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-API-KEY': `${apiKey}`,
        },
      }
    )
    setIsPending(false)
    const jsonResponse = await response.json()
    setPostedData(JSON.stringify(jsonResponse))
  }

  return (
    <div>
      <strong>Like: {String(isPending)}</strong>
      <button onClick={onClick} disabled={isPending}>
        送信
      </button>
      <p>APIからのデータ{isPending ? 'Loading...' : postedData}</p>
    </div>
  )
}

setIsPending(true)でisLoadingを管理

### useTransitionを使った場合のfetch

export const Prefectures = () => {
  const [isPending, startTransition] = useTransition()
  const [postedData, setPostedData] = useState('')
  
  function sleep(ms: number) {
    const startTime = performance.now()
    while (performance.now() - startTime < ms);
  }

  const onClick = async () => {
    setPostedData('')
    startTransition(async () => {
      const apiKey = 'uaz4eakpx2hfYN2P9Mvrp62GPOWuwOeUEWw21sao'
      const response = await fetch(
        'https://opendata.resas-portal.go.jp/api/v1/prefectures',
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'X-API-KEY': `${apiKey}`,
          },
        }
      )
      sleep(3000)
      const jsonResponse = await response.json()
      setPostedData(JSON.stringify(jsonResponse))
    })
  }

  return (
    <div>
      <strong>Like: {String(isPending)}</strong>
      <button onClick={onClick} disabled={isPending}>
        送信
      </button>
      <p>APIからのデータ{isPending ? 'Loading...' : postedData}</p>
    </div>
  )
}

メモ
fetchに関してはreact-queryで良いと思いましたが、実際useStateでの切り替えを行ってるコードもあった為、比較として書いてみました。