Dev.Lib
arrow_backBack to Blogs
LEVEL_022.3June 27, 20261 min read

Concurrent rendering

React & Rendering

React can pause, resume, and abandon render work based on priority — not the same as `async/await` in components.

Summary

React can pause, resume, and abandon render work based on priority — not the same as async/await in components. Transitions (startTransition) mark updates as non-urgent; urgent updates (input) can interrupt. Strict Mode double-invokes in dev to surface side effects. Concurrent mode requires compatible data sources (no tearing without useSyncExternalStore).

Code example

import { startTransition, useState } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    setQuery(e.target.value); // urgent
    startTransition(() => {
      setResults(filterItems(e.target.value)); // non-urgent
    });
  }
}

Key points

  • React can pause, resume, and abandon render work based on priority — not the same as async/await in components.
  • Transitions (startTransition) mark updates as non-urgent; urgent updates (input) can interrupt.
  • Strict Mode double-invokes in dev to surface side effects.
  • Concurrent mode requires compatible data sources (no tearing without useSyncExternalStore).

Further reading

Related concepts