Skip to content

Instantly share code, notes, and snippets.

@babakness
Created February 28, 2018 18:04
Show Gist options
  • Save babakness/96072f10c6c0a7ffe998697f8a8383e0 to your computer and use it in GitHub Desktop.
Save babakness/96072f10c6c0a7ffe998697f8a8383e0 to your computer and use it in GitHub Desktop.
Example of component with lifecycle hooks
// 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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment