🎃 Spookyberb 🎃 – 15-58 Nov 10

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]);
S
Sniberb525d ago
Why is it getting inside the finally even tho the last request has not completed?
S
ScriptyChris525d ago
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
UU
Unknown User524d ago