T8 React Pending
Self-contained async action state management for React apps
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>;
};