React: Why is the debugger pausing twice, but console.log logging once?

My create-react-app project component:

import React from 'react';

function App() {
  console.log('rendered');
  debugger;
  return <div>hi</div>;
}

export default App;

I'm using VSCode with these launch configurations:

{
   "type": "chrome",
   "request": "launch",
   "name": "Launch Chrome against localhost",
   "url": "http://localhost:3000",
   "webRoot": "${workspaceFolder}/frontend-react"
},

When I refresh the page debugger pauses twice, so the program is hitting console.log('rendered'); twice. But in the console, "rendered" is only logged once.

1. Why isn't "rendered" logging twice?
2. Why is the program running twice?