React Concurrent Mode and Suspense: Production Patterns

Concurrent React is the biggest architectural shift since hooks. At Google, we've adopted these patterns to build fluid, responsive UIs.

What is Concurrent Rendering?

In traditional React, rendering is synchronous and blocking. Concurrent mode lets React pause, interrupt, and resume rendering. This means urgent updates (like typing) aren't blocked by expensive renders (like filtering a large list).

useTransition

useDeferredValue

Like useTransition but for values instead of state updates. The deferred value lags behind the actual value during heavy renders.

Suspense for Data Fetching

Suspense lets components "wait" for async data. Instead of loading states in every component, you declare loading boundaries:

Production Gotchas

• Double rendering in dev: Concurrent mode intentionally double-renders to catch side effects. Don't panic.
• Tearing: External stores (Redux, Zustand) must use useSyncExternalStore to avoid tearing
• Suspense waterfalls: Fetch in parallel, not sequentially. Use Promise.all or a data layer like React Query