R
Reactiflux

πŸŽƒ Spookyberb πŸŽƒ – 15-58 Nov 10

πŸŽƒ Spookyberb πŸŽƒ – 15-58 Nov 10

Sβ›„Snowberbβ›„11/10/2022
Im using the AbortController API whenever the input value changes. My problem is that the isLoading state automatically gets to false everytime it aborts a request, ignoring the last one (which doesnt get aborted) and setting isLoading to false even tho the last request is still pending. Why?
useEffect(() => {
const controller = new AbortController();

if (watchedSearch.length > 3 && !cancelSearch) {
(async () => {
try {
setIsLoading(true);
const response = await getAllClients(controller.signal);

} catch (e) {
if (e?.name !== 'AbortError') {
console.error('Could not retrieve holders', e);
}
} finally {
setIsLoading(false);
}
})();
}
return () => controller.abort();
}, [watchedSearch]);
useEffect(() => {
const controller = new AbortController();

if (watchedSearch.length > 3 && !cancelSearch) {
(async () => {
try {
setIsLoading(true);
const response = await getAllClients(controller.signal);

} catch (e) {
if (e?.name !== 'AbortError') {
console.error('Could not retrieve holders', e);
}
} finally {
setIsLoading(false);
}
})();
}
return () => controller.abort();
}, [watchedSearch]);
Why is it getting inside the finally even tho the last request has not completed?
SScriptyChris11/10/2022
Does watchedSearch variable change while request is being awaited? Have you checked how many times that async IIFE gets executed? If you want to handle aborting multiple requests then i think a good options is to have a map of abort controllers, so you can use them individually per request Other way would be to have a queue of requests, where a currently operated one would be assigned with a single controller, which would be reset when request is done and then subsequent request from such queue would be handled with a new abort controller
UUUnknown User11/11/2022
Message Not Public
Sign In & Join Server To View

Looking for more? Join the community!

R
Reactiflux

πŸŽƒ Spookyberb πŸŽƒ – 15-58 Nov 10

Join Server