The constructor and render function is called twice - reactjs

Question

I have a very simple component, in that I log the information to check the Component Lifecycle and see that the constructor and render function is called twice every time when I reload the browser. Could anyone please help me to review why?
Here is my code, and the result in the picture.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: 'Viet'
};
console.log('App constructor');
}
componentWillMount() {
console.log('App componentWillMount');
}
componentDidMount() {
console.log('App componentDidMount');
}
changeState = () => {
this.setState({ name: 'Viet is changed' })
}
render() {
console.log('App render');
return (
<div className='App'>
{this.state.name}
{<button onClick={this.changeState.bind(this)} >Click to change state</button>}
</div>
);
}
}
export default App;

Answer 1

In your render method you are not passing the function right due to which component is re-rendered again. You need to bind the function in constructor change the onClick of button as:
constructor(props) {
super(props);
this.state = {
name: 'Viet'
};
console.log('App constructor');
this.changeState = this.changeState.bind(this);
}
<button onClick={this.changeState}>Click to change state</button>

Answer 2

The double rendering is due to React.StrictMode. If you check your src/index.js the App Component is wrapped with React.StrictMode tags.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
As mentioned in the release notes:
"React.StrictMode is a wrapper to help prepare apps for async rendering"
P.S: There is nothing to worry about re-rendering.