Hint
startTransition tells React: this update can be interrupted. Use it for expensive non-urgent updates (search results, filtering) so the UI stays responsive during typing.
const log = [];
// Simulates React's startTransition
let isInTransition = false;
function startTransition(fn) {
isInTransition = true;
fn();
isInTransition = false;
}
function setState(value, label) {
if (isInTransition) {
// Non-urgent: can be interrupted
log.push([transition] ${label}=${value});
} else {
// Urgent: runs immediately
log.push([urgent] ${label}=${value});
}
}
// Urgent update (typing in input)
setState('a', 'query');
// Non-urgent update (filtering 10k items)
startTransition(() => {
setState([1, 2, 3], 'results');
});
// Another urgent update interrupts
setState('ab', 'query');
console.log(log[0]);
console.log(log[1]);
console.log(log[2]);[urgent] query=a [transition] results=1,2,3 [urgent] query=ab
Explanation: Urgent updates (plain setState) run immediately. Transition updates are marked non-urgent — React can pause and discard them if urgent updates come in.
Key Insight: startTransition tells React: this update can be interrupted. Use it for expensive non-urgent updates (search results, filtering) so the UI stays responsive during typing.