426bcb188a
- Improved the `DuplicateOrdersDialog` component with better tab navigation for order number and line aggregate views. - Enhanced the data structure for duplicate records to include `totalQuantity` and `totalSellingPrice` for more accurate detection. - Implemented auto-flipping logic to ensure users see relevant content without encountering empty views. - Expanded test coverage for the `findDuplicateOrders` function to validate new matching logic. - Updated documentation to clarify duplicate identification criteria.
2 KiB
2 KiB
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use useTransition Over Manual Loading States | LOW | reduces re-renders and improves code clarity | rendering, transitions, useTransition, loading, state |
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.
Incorrect (manual loading state):
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} />
</>
)
}
Correct (useTransition with built-in pending state):
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} />
</>
)
}
Benefits:
- 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
Reference: useTransition