Why is fetch calling api multiple times in react?

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?

Answer

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!