React fetch sending request multiple times

Question

I'm trying fetching data in react. I call the fetch function only once but it's sending request multiple times but I don't know why. I looked other questions and tried their answers but none of them worked.

When I delete useEffect and leave the function alone, it sends a request once, but I think this is not the right way.

useEffect(() => {
  fetchFunction();
}, [])

const fetchFunction =() => {
  console.log("ldşsaşdlisaldi")
  axios.get(
    "someAPI",
    {
      headers: {
        "Authorization" : localStorage.getItem("token")
      },
      credentials: 'include',
    }
  )
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result)
        setIsLoaded(true);
        setTableData(result);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    )
}

Have you checked by the way if your index.js is running strict mode. It's for development purposes only, if it is try removing strict mode and retry is see if the request are still running twice. — Jericho, Aug 31 '22 at 15:42
Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Youssouf Oumar, Aug 31 '22 at 16:18

Drew Reese · Accepted Answer · 2022-08-31T22:40:36.120

Don't attempt to do any sort of "initial mount" check or "state" as this is considered anti-pattern. Don't try to "outsmart" React. The double-mounting is a way for the React.StrictMode component to help you see unexpected side-effects and other issues. You should implement a cleanup function to cancel any in-flight requests when the component unmounts. Use an abortController with the axios GET request.

Example:

useEffect(() => {
  const controller = new AbortController(); // <-- create controller

  fetchFunction({ controller }); // <-- pass controller

  return () => controller.abort(); // <-- return cleanup function
}, []);

const fetchFunction = ({ controller }) => {
  axios.get("someAPI", {
    headers: {
      "Authorization" : localStorage.getItem("token")
    },
    credentials: 'include',
    signal: controller.signal // <-- pass signal to request
  })
    .then(res => res.json())
    .then((result) => {
      console.log(result);
      setTableData(result);
    })
    .catch((error) => {;
      setError(error);
    })
    .finally(() => {
      setIsLoaded(true);
    });
}

For more details and explanation see Fetching Data.

React fetch sending request multiple times

1 Answers1

Linked

Related