Example of component with lifecycle hooks

life-cycle.js

// How to have render props that bind `this` context to functions that need them
// (note: not arrow functions)
// Example illustrates hooks at all stages

export class LifeCycle extends Component {
  constructor(){
    super()
  }
  shouldComponentUpdate(){
    // return false to skip render
    return this.props.shouldComponentUpdate && this.props.shouldComponentUpdate.call(this) 
  }
  componentWillReceiveProps(){
    this.props.componentWillReceiveProps && this.props.componentWillReceiveProps.call(this) 
  }
  componentWillUpdate(){
    this.props.componentWillUpdate && this.props.componentWillUpdate.call(this) 
  }
  componentDidUpdate(){
    this.props.componentDidUpdate && this.props.componentDidUpdate.call(this) 
  }
  componentWillMount(){
    this.props.componentWillMount && this.props.componentWillMount.call(this) 
  }
  componentDidMount(){
    this.props.componentDidMount && this.props.componentDidMount.call(this) 
  }
  render(){
    return ((typeof this.props.render).toLowerCase() === 'function') 
      ? this.props.render.call(this)
      : this.props.render
  }
}