# Components

## ErrorBoundary

Class component that acts as an error boundary in a React application. A classic implementation based on [React's guide](https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries).

[When a component within the boundary throws an error, this component will catch it and display a UI](#user-content-fn-1)[^1] fallback. This can help prevent the entire application from crashing when an error occur.

```tsx
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

[A re-imagination of the React.Suspense component](#user-content-fn-1)[^1] that adds error boundary functionality and the ability to declare suspenders (promises that are readable by React components or their read methods) on itself.

[<mark style="background-color:yellow;">Try it on our Suspense demo.</mark>](https://codesandbox.io/s/angry-ganguly-9pgr1g?file=/src/index.js)

### 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

```typescript
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.

```tsx
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

```tsx
<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.

```tsx
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>
  );
}
```

[^1]:
