Subchapter 3.50

Rendering Usetransition Loading

Automatic pending state: No need to manually manage setIsLoading(true/false)
Error resilience: Pending state correctly resets even if the transition throws
Better responsiveness: Keeps the UI responsive during updates
Interrupt handling: New transitions automatically cancel pending ones

rules/rendering-usetransition-loading.mdMarkdown2 KBView on GitHub

Use useTransition Over Manual Loading States

Use useTransition instead of manual useState for loading states. This provides built-in isPending state and automatically manages transitions.

Rendering Usetransition Loading · Vercel React Best Practices · vercel-labs/agent-skills · Skills Docs

function SearchResults() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  const handleSearch = async (value: string) => {
    setIsLoading(true)
    setQuery(value)
    const data = await fetchResults(value)
    setResults(data)
    setIsLoading(false)
  }

  return (
    <>
      <input onChange={(e) => handleSearch(e.target.value)} />
      {isLoading && <Spinner />}
      <ResultsList results={results} />
    </>
  )
}

import { useTransition, useState } from 'react'

function SearchResults() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [isPending, startTransition] = useTransition()

  const handleSearch = (value: string) => {
    setQuery(value) // Update input immediately
    
    startTransition(async () => {
      // Fetch and update results
      const data = await fetchResults(value)
      setResults(data)
    })
  }

  return (
    <>
      <input onChange={(e) => handleSearch(e.target.value)} />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </>
  )
}