usePromise React Hook

use-promise.js

import { useEffect } from "react";

const promiseMap = new WeakMap();
function usePromise(promise) {
  let data = {};
  if (promiseMap.has(promise)) {
    data = promiseMap.get(promise);
  } else {
    promiseMap.set(promise, data);
  }

  useEffect(() => {
    // cleanup: free map memory
    return () => {
      promiseMap.delete(promise);
    };
  }, [promise]);

  data.status = data.status ?? "pending";

  if (data.status === "pending") {
    data.suspender =
      data.suspender ??
      promise
        .then(result => {
          data.status = "success";
          data.result = result;
        })
        .catch(error => {
          data.status = "error";
          data.result = error;
        });

    throw data.suspender;
  }

  if (data.status === "error") {
    throw data.result;
  }

  return data.result;
}

export default usePromise;

Combine this with a Suspense fallback and define a promise outside of your component to wait until that promise is resolved. E.g.:

const titlePromise = getTitleAsync();

function Title() {
  const title = usePromise(titlePromise);
  return <h1>{title}</h1>;
}

function App() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <Title />
    </Suspense>
  );
}