https://github.com/bytebodger/use-debouncer
A custom React Hook for tracking which API calls are currently in-flight
https://github.com/bytebodger/use-debouncer
Last synced: about 1 year ago
JSON representation
A custom React Hook for tracking which API calls are currently in-flight
- Host: GitHub
- URL: https://github.com/bytebodger/use-debouncer
- Owner: bytebodger
- License: mit
- Created: 2021-03-24T12:06:32.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-24T14:43:53.000Z (about 5 years ago)
- Last Synced: 2025-05-19T00:17:33.374Z (about 1 year ago)
- Language: JavaScript
- Size: 163 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-debouncer
A custom React Hook for tracking which API calls are currently in-flight. The intention is to keep duplicate "fat-fingered" requests from being made to an API - e.g., when user double/triple clicks on a "Submit" button.
## Methodology
The Hook uses a simple queue (`Array`) of strings - presumably, those strings represent endpoint URLs. It is up the caller to add new calls to the queue, and to remove old calls once a response is received.
## Usage
```javascript
export const useApi = () => {
const debouncer = useDebouncer();
const post = async (url = '', data = {}, headers = {}) => {
if (debouncer.isAlreadyInFlight(url))
return;
const response = await axios({
data,
headers,
method: 'POST',
url,
}).catch(error => {
debouncer.removeApiCall(url);
});
debouncer.removeApiCall(url);
return response;
}
return {
post
}
}
```
## Methods
### .addApiCall()
```javascript
const API = {
arguments: {
url: {
required,
format: non - empty string,
},
},
returns: Array of inflight calls,
}
```
### .clearApiCalls()
```javascript
const API = {
arguments: {
// none
},
returns: Array of inflight calls,
}
```
### .isAlreadyInFlight()
```javascript
const API = {
arguments: {
url: {
required,
format: non - empty string,
},
},
returns: Boolean,
}
```
### .removeApiCall()
```javascript
const API = {
arguments: {
url: {
required,
format: non - empty string,
},
},
returns: Array of inflight calls,
}
```
**Examples:**
```javascript
const SomeComponent = () => {
const debouncer = useDebouncer();
const endpoint = '/some/endpoint';
const sendRequest = async () => {
if (debouncer.isAlreadyInFlight(endpoint))
return;
debouncer.addApiCall(endpoint);
await doTheApiCall()
.catch(() => debouncer.removeApiCall(endpoint));
debouncer.removeApiCall(endpoint);
}
return <>
Send
Clear
>
}
```