Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use useTransition Over Manual Loading States
6 
7Use `useTransition` instead of manual `useState` for loading states. This provides built-in `isPending` state and automatically manages transitions.
8 
9**Incorrect (manual loading state):**
10 
11```tsx
12function SearchResults() {
13  const [query, setQuery] = useState('')
14  const [results, setResults] = useState([])
15  const [isLoading, setIsLoading] = useState(false)
16 
17  const handleSearch = async (value: string) => {
18    setIsLoading(true)
19    setQuery(value)
20    const data = await fetchResults(value)
21    setResults(data)
22    setIsLoading(false)
23  }
24 
25  return (
26    <>
27      <input onChange={(e) => handleSearch(e.target.value)} />
28      {isLoading && <Spinner />}
29      <ResultsList results={results} />
30    </>
31  )
32}
33```
34 
35**Correct (useTransition with built-in pending state):**
36 
37```tsx
38import { useTransition, useState } from 'react'
39 
40function SearchResults() {
41  const [query, setQuery] = useState('')
42  const [results, setResults] = useState([])
43  const [isPending, startTransition] = useTransition()
44 
45  const handleSearch = (value: string) => {
46    setQuery(value) // Update input immediately
47    
48    startTransition(async () => {
49      // Fetch and update results
50      const data = await fetchResults(value)
51      setResults(data)
52    })
53  }
54 
55  return (
56    <>
57      <input onChange={(e) => handleSearch(e.target.value)} />
58      {isPending && <Spinner />}
59      <ResultsList results={results} />
60    </>
61  )
62}
63```
64 
65**Benefits:**
66 
67- **Automatic pending state**: No need to manually manage `setIsLoading(true/false)`
68- **Error resilience**: Pending state correctly resets even if the transition throws
69- **Better responsiveness**: Keeps the UI responsive during updates
70- **Interrupt handling**: New transitions automatically cancel pending ones
71 
72Reference: [useTransition](https://react.dev/reference/react/useTransition)
73