Why component with React.useState() is being rendered twice?

This code will print to the console "App" 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 two times

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>
);
}

Added one line
const [foo, setFoo] = React.useState(1);