React componentDidMount and componentDidUpdate test

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Hello extends React.Component {
	componentWillMount() {
  	console.log('componentWillMount');
  
  	this.setState({
    	name: 'World',
      useTimeout: true
    })
  }
  componentDidUpdate() {
  	console.log('componentDidUpdate');
    
  	this.changeName();
  }
  componentDidMount() {
  	console.log('componentDidMount');
  	
    this.changeName();
  }
  
  changeName() {
  	if (this.state.name !== 'Universe') {
    	if (this.state.useTimeout) {
        setTimeout(() => {
          this.setState({
            name: 'Universe'
          },() => this.setState({name: 'Big Bang',
      						useTimeout: false}));
        }, 0);
      } else {
      	this.setState({
          name: 'Universe'
        });
      }
    } 
  }
  
  render() {
  	console.log('render', this.state.name);
    
    return (
    	<div>
    	  <h2>Hello {this.state.name}</h2>
        
        <div>
          <button onClick={() => this.setState({ useTimeout: false, name: 'World' })}>Immediately call setState</button>
          <button onClick={() => this.setState({ useTimeout: true, name: 'World' })}>Async setState</button>
        </div>
          
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);