@rest-hooks/hooks
Version:
Collection of composable data hooks
49 lines (35 loc) • 2.08 kB
Markdown
# Networking Hooks
[](https://circleci.com/gh/data-client/rest-hooks)
[](https://app.codecov.io/gh/data-client/rest-hooks?branch=master)
[](https://www.npmjs.com/package/@rest-hooks/hooks)
[](https://bundlephobia.com/result?p=@rest-hooks/hooks)
[](https://www.npmjs.com/package/@rest-hooks/hooks)
[](http://makeapullrequest.com)
Composable hooks for networking data
<div align="center">
**[📖Read The Docs](https://resthooks.io/docs/api/useDebounce)**
</div>
### [useCancelling()](https://resthooks.io/docs/api/useCancelling)
[Aborts](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) inflight request if the parameters change.
```typescript
const data = useSuspense(useCancelling(MyEndpoint, { filter }), { filter });
```
### [useDebounce()](https://resthooks.io/docs/api/useDebounce)
Delays updating the parameters by [debouncing](https://css-tricks.com/debouncing-throttling-explained-examples/).
Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).
```typescript
const debouncedFilter = useDebounce(filter, 200);
const data = useSuspense(SearchList, { filter: debouncedFilter });
```
### [useLoading()](https://resthooks.io/docs/api/useDebounce)
Helps track loading state of imperative async functions.
```tsx
function Button({ onClick, children, ...props }) {
const [clickHandler, loading, error] = useLoading(onClick);
return (
<button onClick={clickHandler} {...props}>
{loading ? 'Loading...' : children}
</button>
);
}
```