Concurrent React: Transitions & Suspense

Concurrent React allows React to interrupt, pause, or resume component rendering to keep the browser main thread responsive during heavy UI updates. Before Concurrent React, every state update had equal priority, causing input typing latency during heavy list filtering.

With useTransition, you mark non-urgent state updates (such as switching tabs or filtering thousands of search results) as low priority. React keeps the UI interactive for urgent updates (like keystrokes or button clicks) while processing the transition in the background. useDeferredValue defers updating a secondary value until high-priority renders complete.

Before

Blocking Main Thread Search Filter

1// ❌ Keystroke input lags while filtering 10,000 items synchronously2function Search() {3  const [query, setQuery] = useState('');4  const handleChange = (e) => setQuery(e.target.value); // Blocks typing!5  return <input value={query} onChange={handleChange} />;6}

After

Non-Blocking Transition for Search Filter

1function Search() {2  const [query, setQuery] = useState('');3  const [deferredQuery, setDeferredQuery] = useState('');4  const [isPending, startTransition] = useTransition();5 6  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {7    setQuery(e.target.value); // Urgent: updates input instantly8    startTransition(() => {9      setDeferredQuery(e.target.value); // Non-urgent: filters list in background10    });11  };12 13  return <input value={query} onChange={handleChange} />;14}

Exercise

Wrap a heavy tab-switching navigation component in useTransition and display a subtle loading indicator during rendering transitions.

Check your understanding

What is the difference between an urgent and non-urgent update in React?Show answerHide answer
Answer
Urgent updates reflect direct physical interactions (typing, clicking); non-urgent updates transition the view (filtering, switching tabs).
What does the isPending boolean returned by useTransition indicate?Show answerHide answer
Answer
It returns true while React is actively processing the background transition render.