AngeloooooandDraculabo
8ed4593f73
* Refactor Gemini model display: filter old versions, group low/high pro, and improve naming * Fix potential negative minutes and refine Gemini 3 Pro grouping logic based on PR feedback * The account change process has been sped up * Address PR review: enhance error message and parameterize polling interval in process handler * Address PR review: fix potential race condition in database backup logic * fix: prevent renderer white screen and harden sentry gating * feat: localize model labels * chore: enable hoisted node-linker * chore: ignore .agent/.claude/.codex in prettier --------- Co-authored-by: Draculabo <[email protected]>
76 lines
2.0 KiB
Markdown
76 lines
2.0 KiB
Markdown
---
|
|
title: Use useTransition Over Manual Loading States
|
|
impact: LOW
|
|
impactDescription: reduces re-renders and improves code clarity
|
|
tags: 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):**
|
|
|
|
```tsx
|
|
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):**
|
|
|
|
```tsx
|
|
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](https://react.dev/reference/react/useTransition)
|