Loading lesson path
â® Previous Next â¯
The useTransition hook helps you keep your React app responsive during heavy updates.
Formula
It lets you mark some state updates as "non - urgent", allowing other, more urgent updates to happen first.A slow operation that might freeze the UI
Here's a simple example showing how to use transitions in a search feature:
Example import { useState, useTransition } from 'react';function SearchBar() {
const [text, setText] = useState('');
const [results, setResults] = useState('');
const [isPending, startTransition] = useTransition();const handleChange = (e) => {
// Urgent: Update input right away setText(e.target.value);Formula
// Non - urgent: Update search results startTransition(() => {setResults(e.target.value);
});
};return (<div>
<input value={text} onChange={handleChange} />
{isPending ? (Formula
< p > Loading...</p >) : (
<p>Search results for: {results}</p>
)}</div>
);
}The input field updates immediately (urgent update)
Formula
The search results update is marked as a transition (non - urgent)The loading message shows while the transition is pending
Here's a more practical example with a slow search feature:
Example import { useState, useTransition } from 'react';function SearchResults({ query }) {
// Simulate slow search results const items = [];
if (query) {
for (let i = 0; i < 1000; i++) {
items.push(<li key={i}>Result for {query} - {i}</li>);
}
}
return <ul>{items}</ul>;
}function App() {
const [input, setInput] = useState('');
const [query, setQuery] = useState('');
const [isPending, startTransition] = useTransition();const handleChange = (e) => {
// Urgent: Update input field setInput(e.target.value);Formula
// Non - urgent: Update search results startTransition(() => {setQuery(e.target.value);
});
};return (<div> <input type="text"
value={input}
onChange={handleChange}
placeholder="Type to search..."/>
{isPending && <p>Loading results...</p>}
<SearchResults query={query} /></div>
);
}When you type in the input field, it updates immediately The search results update is wrapped in startTransition While the results are updating, isPending is true The UI stays responsive even with many results useTransition Hook The useTransition hook returns two items: isPending : tells you if a transition is active startTransition : function to mark updates as transitions
Use transitions only for non-urgent updates. For example, typing in an input field should be urgent, but filtering a large list can be a transition. â® Previous Next â¯