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.