<div id="app"></div>
class ComponentParent extends React.Component {
  constructor(){
		super();
    console.log("Parent constructor");
		this.state = {
			name: 'John'
		}
	}

	componentWillMount() {
		console.log("Parent componentWillMount");                  
	}
    
   	componentDidMount(){
    	console.log("Parent componentDidMount");                                                                       
    }
	componentWillReceiveProps() {
		 console.log("Parent componentWillRecieveProps"); 
	}

	shouldComponentUpdate(nextProps, nextState) {
		console.log("Parent shouldComponentUpdate"); 
		return true;
	}
	
	componentWillUpdate(){
		console.log("Parent componentWillUpdate"); 
	}

	componentDidUpdate(prevProps, prevState){
		console.log("Parent componentDidUpdate"); 
	}
	
	componentWillUnmount(){
		console.log("Parent componentWillUnmount"); 
	}
  render() {
    console.log("Parent render"); 
    return (
      <section>
        Hello <ComponentChild name={this.state.name}/>
      </section>
    )
  }
}

class ComponentChild extends React.Component {
  constructor(){
		super();
    console.log("Child constructor");
	}

	componentWillMount() {
		console.log("Child componentWillMount");                  
	}
    
   	componentDidMount(){
    	console.log("Child componentDidMount");                                                                       
    }
	componentWillReceiveProps() {
		 console.log("Child componentWillRecieveProps"); 
	}

	shouldComponentUpdate(nextProps, nextState) {
		console.log("Child shouldComponentUpdate"); 
		return true; //false will stop re-rendering of this component
	}
	
	componentWillUpdate(){
		console.log("Child componentWillUpdate"); 
	}

	componentDidUpdate(prevProps, prevState){
		console.log("Child componentDidUpdate"); 
	}
	
	componentWillUnmount(){
		console.log("Child componentWillUnmount"); 
	}
  render() {
    console.log("Child render"); 
    return(
      <span>Child {this.props.name}</span>
    )
  }
}

ReactDOM.render(<ComponentParent/>, document.getElementById('app'))
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js