Skip to main content

Suspense API ↔ React API to defer render for FC

aka React-Concurrent-Mode, Concurrent-Mode, Suspend

<Suspense>​

Suspense API Wrapper to define Suspense Boundary to allow Lazy Load

Lazy()​

React API function to Lazy Load FC for Suspense Boundary

Suspense Boundary​

Component Hierarchy wrap by <Suspense\> to suspend render children with fallback until ready

Concurrent Mode splits VDOM pipeline into smaller units of work

Concurrent Mode provides ??regular points?? for Browser/OS to detect user input

Concurrent Mode will pause task to build UI, Diffing & Reconciling DOM change

React Scheduler​

Concurrent Mode intelligent granular scheduler to pause/run task by priority

useTransition()

userDeferredValue()

<Suspense\> Wrapper to Suspend render children (if not ready to return) & provide a fallback

References​

  1. <Suspense> ↔ Suspense API Wrapper to define Suspense Boundary to allow Lazy Load

  2. React Scheduler ↔ Concurrent Mode intelligent granular scheduler to pause/run task by priority