4 replies

🎃 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]);

🎃 Spookyberb 🎃 – 15-58 Nov 10

Similar Threads