awaitx

Await promises for React components

Installation

To install awaitx, use npm or yarn:

npm install awaitx

yarn add awaitx

Usage

awaitx provides a simple and intuitive way to handle promises in React components. It allows you to declaratively specify the loading, success, and error states of a promise using the <Await> component.

Example

Before using awaitx:

export const HotPosts = () => {
  const [posts, setPosts] = useState<Post[]>();
  const [error, setError] = useState<unknown>();
  const [fetchingPosts, setFetchingPosts] = useState(false);

  useEffect(() => {
    if (fetchingPosts || posts || error) return;

    setFetchingPosts(true);
    api
      .listHotPosts({})
      .then(setPosts)
      .catch(setError)
      .finally(() => setFetchingPosts(false));
  }, [fetchingPosts, posts, error]);

  return (
    <>
      {error && <h3>{String(error)}</h3>}
      {posts && <PostList posts={posts} />}
      {fetchingPosts && <>Loading posts...</>}
    </>
  );
};

After using awaitx:

export const HotPosts = () => (
  <Await
    source={() => api.listHotPosts({})}
    then={(posts) => <PostList posts={posts} />}
    fail={(error) => <h3>{String(error)}</h3>}
    meanwhile={<>Loading posts...</>}
  />
);

The <Await> component takes the following props:

source: A function that returns a promise. This is the promise that will be awaited.
dependencies: An array of dependencies for the useFuture hook, similar to the dependencies array in useEffect. It determines when the promise should be re-evaluated. If not provided, it is treated as an empty array to prevent excessive reevaluation.
then: A render prop that receives the resolved value of the promise and returns the JSX to render when the promise is fulfilled.
fail: A render prop that receives the error value if the promise is rejected and returns the JSX to render in case of an error.
meanwhile: The JSX to render while the promise is pending.

Benefits

Using awaitx provides several benefits:

It simplifies the code by eliminating the need for explicit state management and effects.
It makes the code more declarative and readable by clearly separating the loading, success, and error states.
It reduces the chances of errors and inconsistencies in handling promise states.
It will only reevaluate the promise when a dependency list is provided.

Contributing