reactjs component lifecycle hooks with examples
TRANSCRIPT
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