Why does a component with React.useState() render twice?

Question

JavaScript

This code will print "App" to the console once.

import React from "react";
export default function App() {
  console.log('App');
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

And this twice

import React from "react";
export default function App() {
  console.log('App');
  const [foo, setFoo] = React.useState(1);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

One line added
const [foo, setFoo] = React.useState(1);