Why is fetch calling api multiple times in react?

Question

I have a very basic api and all it does is return the text "Sunny day".

I create a react project using create react app and try to call the api once then printing result to the console.

Here is the react app

import logo from './logo.svg';
import './App.css';

function App() {

  fetch('https://localhost:44386/weatherforecast')
  .then(response => response.text())
  .then(data => console.log(data));

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

The problem is the api is getting called twice on page load

Can anybody explain why?

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, Sep 21 '22 at 16:03

Aymendps · Accepted Answer · 2022-07-13T23:19:57.680

4

Generally if you want to execute something once, like fetching something from the api on loading the page, you should use the useEffect hook with an empty dependency array like so:

React.useEffect(
 () => {
         fetch('https://localhost:44386/weatherforecast')
         .then(response => response.text())
         .then(data => console.log(data));
 }, []) // <--- empty dependency array

Edit: This might be also caused by <StrictMode>. It's intended to make React render twice in development mode so that it can give you suggestions on how you can improve your code and hooks usage. That might be why your app is rendering twice!

edited Jul 13 '22 at 23:19

answered Jul 13 '22 at 23:06

Aymendps

1,346
4
20

I put that change in but still the same. – CraftyFox Jul 13 '22 at 23:09
2

Did you add the empty array? If so did you put the console.log inside the useEffect? If so are you sure there is no other instance of this fetch function being executed somewhere else? If so are you running react in by any chance? If so can you try removing and see if that solves it? StrictMode causes react to render twice in development mode so that might be it. – Aymendps Jul 13 '22 at 23:12
1

oh brilliant! Thank you so much. It was strict mode. I was not aware of this. – CraftyFox Jul 13 '22 at 23:18

score 1 · Answer 2 · answered Jul 13 '22 at 23:09

The API is being called twice because your app renders two times for some reason. Why does the component render twice is an other question you might find an answer to in this SO thread.

Since you are calling the endpoint that way every time your component renders an API call will be made. To avoid that you can add the API call in a useEffect and make it run only the first time your component renders. (More on useEffect)

useEffect(() => {
  fetch('https://localhost:44386/weatherforecast')
    .then(response => response.text())
    .then(data => console.log(data));
}, []);

score 0 · Answer 3 · answered Jul 13 '22 at 22:56

0

The reason is because you might have a service worker installed. try running the program with
yarn start --no-service-worker or
npm start --no-service-worker

answered Jul 13 '22 at 22:56

Soufian

90
4

tried that, same result. – CraftyFox Jul 13 '22 at 23:07

Why is fetch calling api multiple times in react?

3 Answers3