HOC for Suspense and ErrorBoundary

I was wondering whether it's possible to have following component:

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};

and use it without having to pass the children as function. If I try to do pass children as a JSX element, both Suspense and ErrorBoundary arent used at all.

2 Replies

Brendonovich•2mo ago

If I try to do pass children as a JSX element, both Suspense and ErrorBoundary arent used at all

That's because you're destructuring props, which causes children to be evaulated before ErrorBoundary and Suspense are created. Avoid destructuring and children as a JSX element should work fine

ikprk•2mo ago

Thank you very much!

Gaming

Programming

HOC for Suspense and ErrorBoundary