An await component example

async-example.tsx

import { JSX } from 'preact';
import { useEffect, useState } from 'preact/hooks';

export const useAwait = <T,>(value: Promise<T>) => {
  const [isFulfilled, setFulfilled] = useState<boolean>(false);
  const [resolved, setResolved] = useState<T>(undefined);
  const [rejected, setRejected] = useState<any>(undefined);

  useEffect(() => {
    // tslint:disable-next-line: no-floating-promises
    value
      .then(v => setResolved(v))
      .catch(err => setRejected(err))
      .finally(() => setFulfilled(true));
  }, []);

  return [isFulfilled, resolved, rejected];
};

interface Props<T> {
  value: Promise<T>;
  children: (resolved: T, rejected: any) => JSX.Element;
  fallback?: JSX.Element;
}

const Await = <T,>({ value, children, fallback }: Props<T>) => {
  const [isFulfilled, resolved, rejected] = useAwait(value);
  return isFulfilled ? children(resolved, rejected) : fallback ?? null;
};

export default Await;