Why is fetch calling api multiple times in react? [duplicate]

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 — Youssouf Oumar
– Youssouf Oumar, Commented Sep 21, 2022 at 16:03

Aymendps · Accepted Answer · 2022-07-13 23:19:57Z

7

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, 2022 at 23:19

answered Jul 13, 2022 at 23:06

Aymendps

1,5607 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CraftyFox Over a year ago

I put that change in but still the same.

Aymendps Over a year ago

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 <StrictMode> by any chance? If so can you try removing <StrictMode> and see if that solves it? StrictMode causes react to render twice in development mode so that might be it.

CraftyFox Over a year ago

oh brilliant! Thank you so much. It was strict mode. I was not aware of this.

alewis729 · Accepted Answer · 2022-07-13 23:09:03Z

1

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));
}, []);

answered Jul 13, 2022 at 23:09

alewis729

4154 silver badges10 bronze badges

Comments

Soufian · Accepted Answer · 2022-07-13 22:56:43Z

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, 2022 at 22:56

Soufian

904 bronze badges

1 Comment

CraftyFox Over a year ago

tried that, same result.

Collectives™ on Stack Overflow

Why is fetch calling api multiple times in react? [duplicate]

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Related