👀 Check out the changes in Suspensive v2 read more →
Why need to use?

Why need to use?

@suspensive/react is used with the following motivation:

React Suspense need to avoid Server side rendering sometimes

If you have used React Suspense in SSR environment like Next.js, you may encounter error like below. Example banner

It's why clientOnly prop of <Suspense/> is added in this library.

ErrorBoundary more simply

bvaughn/react-error-boundary (opens in a new tab) that provide ErrorBoundary is popular library to use React's error-boundary concept declaratively. ErrorBoundary of bvaughn/react-error-boundary have fallback prop named like FallbackComponent, fallbackRender, fallback. We wanted to use the existing ErrorBoundary's somewhat complex fallback interface in something simpler like @suspensive/react's <ErrorBoundary/>.

It's why <ErrorBoundary/> is added in this library.

Resetting multiple <ErrorBoundary/>s outside of fallback itself easily

To reset <ErrorBoundary/>, you can use reset method provided by fallback prop of <ErrorBoundary/>. but If you want to reset multiple <ErrorBoundary/>s outside of its fallback, you have to provide new element of resetKeys to props of each <ErrorBoundary/>s. but If you use @suspensive/react's <ErrorBoundaryGroup/>, You don't need to do this tiresome. <ErrorBoundaryGroup/> will reset multiple <ErrorBoundary/>s easily.

It's why <ErrorBoundaryGroup/> is added in this library.