Frontend Beauty
ESC

Type to search the knowledge base.

Concurrent Features Overview

Concurrent React: interruptible rendering, transitions, Suspense, and why render purity matters more than ever.

advanced3 min read
  • react
  • concurrent-features

Concurrent features let React start rendering an update, pause, abandon, or resume work so the browser can stay responsive. You do not enable a single “concurrent mode” flag in modern React — you use concurrent-capable APIs (createRoot, transitions, Suspense) and write render-safe components.

Docs: Start Transition, Suspense.

Core ideas

  1. Render can be interruptible — pure render functions are mandatory; side effects belong in effects/events.
  2. Urgent vs transition updates — typing and clicks stay high priority; heavy filters can be transitions (useTransition, useDeferredValue).
  3. Suspense coordinates loading UI while content is not ready.
  4. Streaming SSR can send HTML in chunks as server work completes (framework-dependent).

What you write differently

// Bad under concurrent render: side effect while rendering
function Bad({ id }) {
  localStorage.setItem('last', id);
  return <div />;
}

// Good
function Good({ id }) {
  useEffect(() => {
    localStorage.setItem('last', id);
  }, [id]);
  return <div />;
}

Do not rely on “render runs once.” Strict Mode already double-invokes in dev; concurrent features make purity a runtime requirement.

createRoot

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

Legacy ReactDOM.render is the old synchronous path. New apps use createRoot.

Tooling map

Need API
Non-urgent setState startTransition / useTransition
Lag a value useDeferredValue
Loading UI Suspense
External store safety useSyncExternalStore
Force sync flush (rare) flushSync

Interview out-loud

“Concurrent React can interrupt rendering to keep the UI responsive. I keep render pure, mark expensive updates as transitions, use Suspense for loading boundaries, and use createRoot. Concurrent is not a free performance boost — it is a scheduling model that rewards correct data flow.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides