Components

A re-imagination of a concurrent API, and a dinosaur that becomes it's best friend.

ErrorBoundary

Class component that acts as an error boundary in a React application. A classic implementation based on React's guide.

fallback. This can help prevent the entire application from crashing when an error occur.

function App() {
  const Failed = () => {
    return <p>Ops.</p>;
  };

  const Content = () => {
    throw new Error();
    
    return <p>It doesn't reach here!</p>;
  };

  return (
      <ErrorBoundary fallback={<Failed />}>
        <Content />
      </ErrorBoundary>
  );
}

Props

fallback: React.ReactNode

Component to be rendered when an error occurs inside the boundary, the UI fallback.

children: React.ReactNode

The component's children (the content between the opening and closing tags of a component).

Suspense

that adds error boundary functionality and the ability to declare suspenders (promises that are readable by React components or their read methods) on itself.

Try it on our Suspense demo.

Props

loading: React.ReacNode

React element that is displayed while the children or a suspender is being resolved.

fallback: React.ReacNode (optional)

React element that is displayed in the occurence of an error throw, the UI fallback used on the component's error boundary implementation.

children: React.ReacNode

The component's children (the content between the opening and closing tags of a component).

cause: Cause[] (optional)

An array of causes (promises or their read methods) that the Suspense component will resolve before rendering its children.

Types

Cause

type Cause = (() => Promise<unknown | void | Error> | unknown | Error) | ReadablePromise

Using readable promises to suspend children from the outside

The following example shows how the cause prop can be used suspend the render of components using readable promises that aren't read directly inside them.

const suspender = new ReadablePromise(async () => {
  // the children components will not be rendered until this is resolved
});

function App() {
  const Loading = () => {
    return <p>Loading...</p>;
  };

  const Content = () => {
    return <p>I waited!</p>;
  };

  return (
      <Suspense loading={<Loading />} cause={suspender}>
        <Content />
      </Suspense>
  );
}

Usage with multiple causes

<Suspense loading={<Loading />} cause={[suspender, anotherSuspender]}>
    <Content />
</Suspense>

Using the internal error boundary

This example is an implementation of the component that opts to use it's built-in error boundary.

function App() {
  const Loading = () => {
    return <p>Loading...</p>;
  };
  
  const Failed = () => {
    return <p>Ops.</p>;
  };

  const Content = () => {
    throw new Error();
    
    return <p>It doesn't reach here!</p>;
  };

  return (
      <Suspense loading={<Loading />} fallback={<Failed />}>
        <Content />
      </Suspense>
  );
}