T8 React Pending

Self-contained async action state management for React apps

Docs GitHub

npm i @t8/react-pending

Features: Concise API for async state tracking, local or shared · Decoupled from app state management and async actions' internals · CSR/SSR-compatible

+ import { usePendingState } from "@t8/react-pending";

  export let ItemList = () => {
    let [items, setItems] = useState([]);
+   let { initial, pending, error, track } = usePendingState();

    useEffect(() => {
-     fetchItems().then(setItems);
+     track(fetchItems()).then(setItems);
    }, [fetchItems, track]);

+   if (initial || pending) return <p>Loading...</p>;
+   if (error) return <p>An error occurred</p>;

    return <ul>{items.map(/* ... */)}</ul>;
  };