Transitions & useTransition
A transition marks updates as non-urgent. This is useful when an urgent interaction, such as typing, should remain responsive while expensive derived content updates.
The transition API also provides pending state so the UI can communicate that the non-urgent update is being prepared.
Use transitions to improve interaction scheduling, not as a substitute for fixing pathological algorithms or unnecessary rendering.
Transitioning a filter
const [isPending, startTransition] = useTransition();
function handleChange(value) {
setInput(value);
startTransition(() => {
setFilter(value);
});
}💡 The input can update urgently while the expensive filtered result is scheduled as non-urgent work.
Key Takeaways
- Transitions distinguish update priority.
- Keep urgent controls responsive.
- Pending UI should explain meaningful background work.