ReactJS Component Lifecycle hooks with examples

- Ravi Mone

Today's Menu

Order of execution of lifecycle hooks

GetDefaultProps

GetInitialState

ComponentWillMount

Render

ComponentDidMount

ComponentWillReceiveProps

ShouldComponentUpdate

ComponentWillUpdate

ComponentDidUpdate

ComponentWillUnMount

Order of execution of lifecycle hooks

Lets see the order of exectution of the components with a demo

https://plnkr.co/edit/QEyh4E1DSsl1Zlmbj6Wy?p=preview

getDefaultProps()

Called once

Used as defaults props to the component, if the component is not passed with props and is used with this.props

getDefaultProps: function(){ return { /* something here */};}

https://plnkr.co/edit/3AnEup2KQLlFHCeA0Ffh?p=preview

getInitialState()

Called once

The getInitialState method enables to set the initial state value, that is accessible inside the component via this.state.

getInitialState: function(){ return { /* something here */};}

https://plnkr.co/edit/QEyh4E1DSsl1Zlmbj6Wy?p=preview

ComponentWillMount()

Called once

This hook has the ability to access the props (this.props) and state (this.state). BUT NOT THE DOM.syntax : componentWillMount: function(){ /* something here */;}ex: componentWillMount(){ console.log(this.props, this.state)

//This will be null console.log(ReactDOM.findDOMNode(this)) }

https://plnkr.co/edit/OExeRzWUQywpclAD2657?p=preview

render()

Called evertime the state changes it valuei.e., when the state value is modified by this.setState({ counter: })syntax : render: function(){ return JSX DOM Or null/false}

Neither props nor state should be modified inside this function

render function has to be pure, meaning that the same result is returned every time the method is invoked

https://plnkr.co/edit/4se5p2vR9skoXsY3Mbo8?p=preview

componentDidMount()

Called once, after the render method is called

This hook has the ability to access the props (this.props) and state (this.state) and the DOM too.syntax : componentDidMount: function(){ /* something here */;}ex: componentDidMount(){ console.log(this.props, this.state)

//This will return the ccurrent component's dom console.log(ReactDOM.findDOMNode(this)) },Any DOM interactions should always happen in this phase not inside the render method.

https://plnkr.co/edit/pgsZXyeNHm7RrShs4b7a?p=preview

Quick Galance

componentWillReceiveProps()

It will not be called on the initial render, but called in subsequent renders

syntax : componentWillReceiveProps: function(newProps){ /* something here */;}ex: componentWillReceiveProps: function(newProps){ console.log(newProps, ReactDOM.findDOMNode(this)) },

https://plnkr.co/edit/wNVTeSSINT401JifucLb?p=preview

shouldComponentUpdate()

This is always called before the render method and enables to define if a re-rendering is needed or can be skipped based on the bollean vaue it returns.

syntax : shouldComponentUpdate: function(nextProps, nextState){ // return a boolean value return true;}ex: shouldComponentUpdate(newProps, newState) { console.log(newProps, newProps.myNumber