naporin0624 Suspense Boundary Design
Interview Questions
- Loading units - Which components load independently?
- Error handling - Show error UI, retry button, or bubble up?
- Loading UI - Skeleton, spinner, or shimmer?
Pattern
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense fallback={<Skeleton />}>
<AsyncComponent />
</Suspense>
</ErrorBoundary>
Rule: ErrorBoundary wraps Suspense (outside).
Best Practices
- Match skeleton to content size (prevents layout shifts)
- Avoid nested Suspense unless intentional waterfall
- Group components sharing data under same boundary
Related
- jotai-reactive-atoms/HYBRID-ATOM.md - Suspense with async atoms