Constructor and render methods run twice in react component

Question

I have created a react project and added constructor and render menthod to it, while running it I was expecting both constructor and render run once only, but both are running twice. First constructor is running twice and then render. Can someone please help, same was happening to other life cycle methods with me.

import React, {Component} from 'react';
class App extends Component {
  constructor(props) {
    super(props)
    console.log('Constructor')
  }

  render() {
    console.log('render')
    return (
      <h1>My Favorite Color is </h1>
    );
  }
}
export default App;

Here is my index.js.. for how it is called

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

Answer 1

It works for me, if I replace below code

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

by below line (but the above code is the one I got as default code on creating a project using create-react-app command.

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

Answer 2

I had the same problem and just removed React.StrictMode and now everything renders only once.