javascript / expert
Snippet
Non-Blocking UI Updates with useTransition
useTransition allows you to mark specific state updates as 'transitions', meaning they are non-urgent. This lets React prioritize urgent updates (like typing in an input) over expensive computations, keeping the interface fluid even during heavy render tasks.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SearchComponent() {const [isPending, startTransition] = useTransition();const [filter, setFilter] = useState('');const [results, setResults] = useState([]);const handleSearch = (e) => {const value = e.target.value;// Urgent update: input field must be responsivesetFilter(value);// Non-urgent: computation/rendering results can waitstartTransition(() => {const filtered = largeDataset.filter(i => i.includes(value));setResults(filtered);});};return <input value={filter} onChange={handleSearch} />;}
react
Breakdown
1
const [isPending, startTransition] = useTransition();
Returns a pending state flag and a function to start the transition.
2
startTransition(() => { ... });
Wraps a state update to mark it as low-priority for the concurrent renderer.
3
isPending
A boolean indicating if the transition is still being processed in the background.