Concurrent React Interview Questions
With Answers & Code Examples

Concurrent React (enabled by default in React 18 with createRoot) lets React pause work in progress when something more urgent arrives, then resume it later.

Problems it solves:

• Blocking renders — expensive renders blocked the main thread, causing input lag. Now React can interrupt a slow render to handle a keypress.
• Tearing — reading from an external store during a render could give inconsistent UI. Concurrent React prevents this with useSyncExternalStore.
• Waterfall loading — with Suspense + concurrent features, React can start rendering before all data is ready.

// React 18 — opt in to concurrent features
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render();

// Now transitions, Suspense, startTransition all work correctly

New APIs enabled by concurrency:

• startTransition / useTransition — mark updates as non-urgent
• useDeferredValue — defer a value until the browser is idle
• Suspense for data fetching — show fallbacks while data loads
• useId — stable IDs for SSR

Both allow non-urgent updates to be deferred so urgent updates (typing, clicking) stay responsive.

useTransition — marks a state update as a transition:

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

  function handleChange(e) {
    setQuery(e.target.value); // urgent — update input immediately

    startTransition(() => {
      // non-urgent — can be interrupted if user keeps typing
      setResults(expensiveFilter(e.target.value));
    });
  }

  return (
    <>
      
      {isPending ?  : }
    
  );
}

useDeferredValue — defer a value you receive (useful when you don't own the state setter):

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query); // lags behind query
  const results = expensiveFilter(deferredQuery); // uses stale value during typing
  const isStale = query !== deferredQuery;

  return (
    

      {results.map(r => )}
    
  );
}