How to use the react-async-hook.useAsyncAbortable function in react-async-hook
To help you get started, we’ve selected a few react-async-hook examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
slorber / react-async-hook / example / index.tsx View on Github 
const useSearchStarwarsHero = () => {
// Handle the input text state
const [inputText, setInputText] = useState('');
// Debounce the original search async function
const debouncedSearchStarwarsHero = useConstant(() =>
AwesomeDebouncePromise(searchStarwarsHero, 300)
);
const search = useAsyncAbortable(
async (abortSignal, text) => {
// If the input is empty, return nothing immediately (without the debouncing delay!)
if (text.length === 0) {
return [];
}
// Else we use the debounced api
else {
return debouncedSearchStarwarsHero(text, abortSignal);
}
},
// Ensure a new request is made everytime the text changes (even if it's debounced)
[inputText]
);
// Return everything needed for the hook consumer
return {const StarwarsHeroLoaderAbortable = ({ id }: { id: string }) => {
const asyncHero = useAsyncAbortable(
async (abortSignal, id) => fetchStarwarsHero(id, abortSignal),
[id]
);
return ;
};
