advanced

Concurrent rendering concepts

Reason about interruptible rendering, transitions, deferred values, Suspense, and render purity.

Concurrent features let React interrupt, resume, or discard render work to keep interactions responsive. `startTransition` marks non-urgent updates; `useDeferredValue` lags behind fast-changing input. Suspense coordinates async UI boundaries with fallbacks.

Rendering must stay pure because work may run more than once. Transitions do not block urgent updates like typing in a controlled field. Interview depth includes knowing these APIs exist, when they help large trees, and that they require a concurrent root.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Urgent vs transition updates.
  • Suspense for async component boundaries.
  • Purity still required during concurrent render.