Sometimes, we want to render React components with promises inside.

In this article, we’ll look at how to render React components with promises inside.

Render React Components with Promises Inside

To render React components with promises inside, we can use the usePromise hook provided by the react-promise package.

To install it, we run:

npm i react-promise

Then we can use it by writing:

import React from "react";
import usePromise from "react-promise";

export default function App() {
  const { value, loading } = usePromise(Promise.resolve("hello world"));
  if (loading) {
    return null;
  }
  return <div>{value}</div>;
}

We call usePromise with a promise that resolves to 'hello world'.

It returns an object with the value and loading properties.

value is the resolved value of the promise.

loading is a boolean that indicates whether the promise is loading or not.

Conclusion

To render React components with promises inside, we can use the usePromise hook provided by the react-promise package.