How to clear previous api call? (React)

Question

I'm trying to find a proper way to "clear" my first fetch request if a second one is made.

I have this:

const [data, setData] = useState([]);

const callAPI = async () => {
    const api = await fetch(
      `my API`
    );
    const data = await api.json();
    setData(data);

The user can call the same api again to request similar or different date for a second, third, fourth time.... and I'm having issues with rendering information after the first call. I receive the info from the fetch request but React won't load the info properly or at all. I'm wondering if there is a proper way to do something like this:

const [data, setData] = useState([]);

const callAPI = async () => {
 **  clearFetch() **
    const api = await fetch(
      `my API`
    );
    const data = await api.json();
    setData(data);

José Ramírez · Answer 1 · 2022-10-12T03:26:07.263

Yes, there is. The fetch() function can be canceled. You use an AbortController's signal object. The details can be seen in this answer.

I will assume you have your call to fetch() inside a useEffect().

let abortC = null;
export default MyComponent = () => {
    useEffect(() => {
        abortC?.abort();
        abortC = new AbortController();
        var x = async () => {
            try {
                var response = await fetch('blah', { signal: abortC.signal });
                setSomeState(await response.json());
            }
            catch (ex) {
                // Whatever.
            }
        };
        x();
    }, [dependencies]);
    return ...
}

UPDATE: Edited to take the declaration of abortC out to the top level so it is properly enclosed. This would be in response of @EndlessCodebase's comment. Many thanks for the observation.

Wouldn't `abortC` always be null because once you call `setSomeState()` the component re renders rendering a new null `abortC`. So you could never actually abort the fetch request because you would always be calling abort on a null AbortController. I think you would have to put the AbortController in a ref. — EndlessCodebase, Oct 12 '22 at 03:22

score 1 · Answer 2 · answered Oct 12 '22 at 03:17

1

you can use useEffect's cleanup function to clear previous call. In below code snippet api call will be ignored if add-dependency-which-causes-to-rerun changes within 500ms. Hope it helps!

useEffect(() => {
    const getData = setTimeout(async () => {
      const api = await fetch(
        'my API'
      );
      const data = await api.json();
      setData(data);

    },500)
    return () => clearTimeout(getData)
    
  }, [<add-dependency-which-causes-to-rerun>])

answered Oct 12 '22 at 03:17

ShoaibAh

167
4

Thanks @Shoaibah, can you help me understand the idea a bit more? The code I post (callApi) is triggered by a button in my app once the user enters an input. I'm assuming I can add the onPress function I have in my button where the [] or should I use the onpress function to first trigger a clearTimeout(getData) then callApi? thanks for your help! – G6ix Oct 12 '22 at 03:26

score 1 · Answer 3 · answered Oct 12 '22 at 05:08

if we are fetching data only on button click then above solution may NOT be a good option. I think you need something like this.

import React, { useEffect, useState, useRef } from 'react';

const FetchDetails = () => {
  const [inputIsChanged, setTnputIsChanged] = useState(false);
  const [prevInput, setPrevInput] = useState('');
  const inputRef = useRef('');
  const initialRender = useRef(true);

  const clickHander = () => {
    const currentValue = inputRef.current.value;

    setTnputIsChanged(inputRef.current.value !== prevInput);
    setPrevInput((prevState) =>
      prevState === currentValue ? prevState : currentValue
    );
  };

  useEffect(() => {
    (async () => {
      if (initialRender.current || !inputIsChanged) {
        initialRender.current = false;
        return;
      }

      const response = await fetch(
        'https://jsonplaceholder.typicode.com/todos/1'
      );
      const data = await response.json();
      console.log(data);
    })();
  }, [inputIsChanged]);

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={clickHander}>Fetch Details</button>
    </>
  );
};

export default FetchDetails;

How to clear previous api call? (React)

3 Answers3