Why is fetch calling api multiple times in react?-CodePudding

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?

CodePudding user response：

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!

CodePudding user response：

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

CodePudding user response：

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