React v19からuseStateではなくuseTransitionでロード中のフラグを管理できる

useTransitionでロード中のフラグを管理

Reactのバージョン18まではロード中のフラグを管理するには以下のコードのようにuseStateでboolean値を使用する必要がありました。

TSX

import { useState } from 'react'
import './App.css'

function UpdateForm() {
  const [name, setName] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async () => {
    if (!name) return
    setIsLoading(true)
    await new Promise((s) => setTimeout(s, 3000))
    setName('')
    setIsLoading(false)
  }

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isLoading}>
        Update
      </button>
      <p>isLoading: {isLoading.toString()}</p>
    </div>
  )
}

function App() {
  return <UpdateForm />
}

export default App

ReactのuseStateでロード中のboolean値を管理するサンプル

Reactのバージョン19からは「useTransition」が新たに追加されたので、これを使用すればuseStateを使わないで、useTransitionをimportして、以下のように書くことができます。

TSX

import { useState, useTransition } from 'react'
import './App.css'

function UpdateForm() {
  const [name, setName] = useState('')
  const [isLoading, startTransition] = useTransition()

  const handleSubmit = () => {
    if (!name) return
    startTransition(async () => {
      await new Promise(s => setTimeout(s, 3000))
      setName('')
    })
  }

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isLoading}>
        Update
      </button>
      <p>isLoading: {isLoading.toString()}</p>
    </div>
  );
}

function App() {
  return <UpdateForm />
}

export default App

setIsLoading(true)およびsetIsLoading(false)でロード中を切り替えるのではなく、startTransition(async () => {})で囲むだけになったので、ロード中の部分がわかりやすくなりました。

useStateでロード中を管理すると書く場所を間違えてミスをしやすいので、React v19以降の環境の場合はuseTransitionを使用したほうが良いです。

useTransitionでロード中のフラグを管理

関連した記事