ReactJS Component Lifecycle hooks with examples

ReactJS Component Lifecycle hooksReactJS Component Lifecycle hooks
with exampleswith examples
- Ravi Mone

Today's MenuToday's Menu
Order of execution of lifecycle hooks
1.GetDefaultProps
2.GetInitialState
3.ComponentWillMount
4.Render
5.ComponentDidMount
6.ComponentWillReceiveProps
7.ShouldComponentUpdate
8.ComponentWillUpdate
9.ComponentDidUpdate
10.ComponentWillUnMount

Order of execution of lifecycle hooksOrder 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()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()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()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()render()
●Called evertime the state changes it value
i.e., when the state value is modified by
this.setState({
counter: <some value>
})
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()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(){
}
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

componentWillReceiveProps()componentWillReceiveProps()
●It will not be called on the initial render, but called in subsequent
renders
syntax :
componentWillReceiveProps: function(newProps){
}
ex:
componentWillReceiveProps: function(newProps){
console.log(newProps, ReactDOM.findDOMNode(this))
},
●https://plnkr.co/edit/wNVTeSSINT401JifucLb?p=preview

shouldComponentUpdate()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 <= 10)
return newProps.myNumber <= 10;
},

componentWillUpdate()componentWillUpdate()
●componentWillUpdate gets called as soon as the the
shouldComponentUpdate returned true.
●Any state changes via this.setState are not allowed.
●strictly used to prepare for an upcoming update not trigger an
update itself.
syntax :
componentWillUpdate: function(nextProps, nextState){
// perform any preparations for an upcoming update
}

componentDidUpdate()componentDidUpdate()
●componentWillUpdate gets called as soon as the the shouldComponentUpdate
returned true.
●Any state changes via this.setState are not allowed.
●Strictly used to prepare for an upcoming update not trigger an update itself.
syntax :
componentDidUpdate: function(prevProps, prevState){
// perform any preparations for an upcoming update
}
●Ex: Consider, you are using any third party library, lets says MaterialLite for
componets like checkbox, radio button...
And at some time, after the component is updated, the material may not be updating
(I once said the same “Firt Time it loaded,and god knows why it is not loading after
the compoent is touched/updated, :P ”), So this is your Hero
componentDidUpdate: function () {
//Reinitialize after the update
common.upgradeMaterialComponents.Init();
},

componentWillUnMount()componentWillUnMount()
●Called once, after the render method is called and before the component is
removed from the DOM
●Used when needing to perform clean up operations, f.e. removing any
timers defined in componentDidMount.
syntax :
componentWillUnMount: function(){
}
ex:
componentWillUnMount(){
console.log(this.props, this.state, ReactDOM.findDOMNode(this))
},
●https://plnkr.co/edit/xAJMb1pvEgcO7dUGrX9h?p=preview

ReactJS Component Lifecycle hooks with examples

ReactJS Component Lifecycle hooks with examples

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to ReactJS Component Lifecycle hooks with examples (20)

Recently uploaded (20)

ReactJS Component Lifecycle hooks with examples