Console.log is printing values twice in constructor and render function in React.js

Question

Why console.log is printing values two times in constructor & render function?

here it is:

class App extends React.Component {
  constructor(props) {
    console.log('Constructor');
    super(props)

    this.state = {
      counter: 0
    }
  }
render() {
    console.log('render');
    return (
      <div style={{ fontSize: '45px', fontWeight: 'bold' }}>
        Counter: {this.state.counter}
      </div>
    )
  }
}

Answer 1

This is due to React.StrictMode. React.StrictMode is a wrapper to help prepare apps for async rendering.

You can read more about it here! https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/