Networking Hooks

Composable hooks for networking data

useCancelling()

Aborts inflight request if the parameters change.

const data = useSuspense(useCancelling(MyEndpoint, { filter }), { filter });

useDebounce()

Delays updating the parameters by debouncing. Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).

const debouncedFilter = useDebounce(filter, 200);
const data = useSuspense(SearchList, { filter: debouncedFilter });

useLoading()

Helps track loading state of imperative async functions.

function Button({ onClick, children, ...props }) {
  const [clickHandler, loading, error] = useLoading(onClick);
  return (
    <button onClick={clickHandler} {...props}>
      {loading ? 'Loading...' : children}
    </button>
  );
}