When a page has a search input box, it is common to debounce the instant input actions before the last input action.
Lodash debounce (_.debounce()
) is one of the options to do it.
Another way to realize it is axios.cancelToken()
.
This is an expamle case using the React hook.
import { useEffect } from 'react';
import axios from 'axios';
export default function useSearch(query: string, page: number) {
useEffect(() => {
let cancel;
axios({
method: 'GET',
params: { query, page },
cancelToken: new axios.cancelToken((c) => cancelToken = c)
}).then(res => {
// do something
}).catch(e => {
// Ignoring every single axios cancellation
if (axios.isCancel(e)) return;
});
return () => cancel();
}, [query, page]);
return {
// something
}
}