javascript / expert
Snippet
Concurrent Rendering with useTransition
The useTransition hook allows you to mark state updates as non-urgent transitions. This prevents heavy computations from blocking the main thread, keeping the UI responsive during complex re-renders.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SearchComponent() {const [isPending, startTransition] = useTransition();const [query, setQuery] = useState('');const [results, setResults] = useState([]);const handleChange = (e) => {setQuery(e.target.value);startTransition(() => {const filtered = largeDataset.filter(item => item.includes(e.target.value));setResults(filtered);});};return (<div style={{ opacity: isPending ? 0.5 : 1 }}><input type="text" onChange={handleChange} />{isPending && <p>Updating list...</p>}<ul>{results.map(r => <li key={r}>{r}</li>)}</ul></div>);}
react
Breakdown
1
const [isPending, startTransition] = useTransition();
Destructures the pending state flag and the function to start the transition.
2
startTransition(() => { ... });
Wraps the heavy state update (filtering) to mark it as lower priority.