react-await-util

Processing asynchronous data in react functional components.

Install

npm install react-await-util

Usage

import {useState} from "react";
import {isPending, useAwaitWatch} from "react-await-util";
import {Skeleton, Button, Flex, Spin} from "antd";

export default function App() {
  const [count, setCount] = useState(0);
  const add = () => setCount(count + 1);
  const [{first, status, value}, {update}] = useAwaitWatch({
    deps: count,
    handle: async (count) => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return "hello" + count;
    },
  });
  return (
    <Skeleton loading={first}>
      <Spin spinning={isPending(status)}>
        <Flex vertical align="center" gap="middle">
          <h1>{count} - {value}</h1>
          <Button.Group>
            <Button onClick={add}>add</Button>
            <Button onClick={update}>update</Button>
          </Button.Group>
        </Flex>
      </Spin>
    </Skeleton>
  );
}

EOF