React useTransition Hook

What is useTransition Hook in React?

useTransition marks a state update as non-urgent. React keeps the interface responsive to urgent updates such as typing, and renders the transition in the background, showing an isPending flag while it works.

Why useTransition Hook matters

Filtering a very large list on every keystroke blocks the main thread and makes the input lag. Marking the filter update as a transition keeps the field instant while the results catch up.

useTransition Hook example

const [isPending, startTransition] = useTransition();
const [query, setQuery] = useState('');
const [results, setResults] = useState(items);

function handleChange(e) {
  setQuery(e.target.value);                    // urgent — updates instantly
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // non-urgent — interruptible
  });
}

<input value={query} onChange={handleChange} />
{isPending && <Spinner />}

How this works

The input value updates immediately because it is outside the transition. The expensive filter runs at lower priority and React can abandon it if the user types again.

Key points to remember

• Only for state updates you control — it cannot deprioritise a network request.
• isPending lets you show a subtle loading indicator without blocking the UI.
• useDeferredValue is the simpler alternative when you only have a value, not a setter.

Common mistakes with useTransition Hook

• Wrapping the input’s own value update in the transition, which makes typing feel laggy.
• Expecting it to speed up slow code — it reprioritises work, it does not reduce it.