Axios call runs twice in react functional component

Question

Why does this fetched print twice? When the axios call is put outside the function it only runs once.

function App() {
  axios('https://www.google.com/').then(x => 
      console.log("fetched")
  )

  return (
    <div className="App">
    </div>
  );
}

export default App;

Answer 1

Do it in a useEffect hook.

function App() {
  React.useEffect(() => {
    axios('https://www.google.com/').then(x => 
        console.log("fetched")
    )
  }, [])

  return (
    <div className="App">
    </div>
  );
}

export default App;

Answer 2

If you want a call to run only one time when the component is rendered, you should put it inside a useEffect.

useEffect(() => {
  axios('https://www.google.com/').then(x => 
      console.log("fetched")
  );
},[]);