What is concurrent rendering and what problem does it solve?

Before concurrent rendering, once React started rendering a tree it had to finish before the browser could handle the next urgent interaction. With a concurrent root, React can work on a low-priority update, yield to the browser, and resume later. If a more urgent update arrives, React can abandon the incomplete work and restart with the latest state.

function SearchPage() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(event) {
    const next = event.target.value;
    setQuery(next);

    startTransition(() => {
      setResults(filterLargeDataset(next));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <p>Updating results...</p>}
      <Results items={results} />
    </div>
  );
}

What concurrency changes

• Rendering can be interrupted and resumed
• Transitions mark updates as non-urgent
• React can keep the previous screen visible while new UI is prepared
• Urgent updates are not blocked behind expensive non-urgent work

Concurrent rendering is not multithreading and does not make a slow calculation fast. The calculation still runs on the main thread; it is simply scheduled differently. Moving truly expensive work to a worker or reducing it is still the right fix.