Why does react re-render twice when using the state hook (useState)?

Question

I have created a component, App , based on reactjs's example of the state hook useState . Here is my code:

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  console.log("before");
  const [count, setCount] = useState(0);
  console.log("after");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

When I run this using node, App renders a button on http://localhost:3000/ :

Based on the explanation accompanying the reactjs example (link above), I would expect that clicking the button would cause App to be re-rendered one time. However, clicking (once) actually causes the re-render to occur twice:

Why does this example lead to the re-render occurring twice?

How can I correct this so that does not occur more than necessary?

---

Note: With each click, two new lines of each 'before' and 'after' are printed to the console, so the double-rendering appears to occur with each click, not due to the initial render.

Answer 1

What you're seeing is the first 'before' and 'after' is from the initial render and the second pair is from when you click the button and state is updated.

It seems the offending code comes from <React.StrictMode>

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

Removing the <React.StrictMode> gets rid of this issue.

ReactDOM.render(<App />, document.getElementById('root'));

Further Reading: React Components rendered twice — any way to fix this?