A fallback is alternate UI shown while intended content is unavailable. In React, it keeps a slow-loading calendar, message, or image from leaving an empty region. section 11.2.2 section 12.3
Use Suspense to declare loading content for lazy descendants. Its fallback replaces the children until they return UI; once loaded, the intended content replaces the fallback. section 11.2.2
Choose the boundary and fallback according to the failure or delay:
- Wrap lazy UI in Suspense and set fallback to concise placeholder content such as “Loading...”. section 11.2.2
- Give separate Suspense boundaries to independent regions when one loading component should not replace another region’s UI. section 11.2.2
- Place an ErrorBoundary around UI that may throw, and provide recovery guidance such as “Try reloading the page.” section 11.3.2
- Combine ErrorBoundary and Suspense when loading can either remain pending or fail: show a loading fallback first and an error fallback on rejection. section 12.1
Loading and error states
Use nested boundaries to distinguish pending data from failure: <ErrorBoundary fallback="Oops!"><Suspense fallback="Loading message..."><Message /></Suspense></ErrorBoundary>. Message retrieves data or throws a promise or error; React then selects the appropriate fallback. section 12.1
<Suspense fallback={<div>Loading...</div>}>
<CalendarWrapper />
</Suspense>
Inspect the minimal Suspense pattern: a fallback prop supplies placeholder UI while the lazy descendant loads. section 11.2.2
