What is useTransition?

Question

Accepted Answer

useTransition is a hook that allows **marking an update as "less urgent"** so React does not block the interface. **Simple analogy:** Imagine you are driving a car and simultaneously looking at the navigator. - **Urgent update** — you press the brake (typing text in input). This needs to be done instantly. - **Deferred (transition) update** — the navigator recalculates the route (filtering a large list). This can be done with a slight delay without blocking the brake. **How it works:** ```jsx import { useState, useTransition } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [isPending, startTransition] = useTransition(); function handleChange(e) { const value = e.target.value; setQuery(value); // URGENT: update input startTransition(() => { const filtered = bigList.filter(item => item.name.includes(value) ); setResults(filtered); // NOT URGENT: can wait }); } return ( <> {isPending && } {/* While filtering — show spinner */} ); } ``` **When to use:** 1. Search with filtering a large list. 2. Tab switching with heavy content. 3. Any updates that may "hang" (more than 50ms). useTransition returns [isPending, startTransition]. isPending is true while the deferred update is executing.

React: What is useTransition?