Minimalist Guide for React Component Life cycle (with examples)
React component life cycle can be break down into three basic levels on the basis of methods being triggered or used.
- Mounting (initialization)
- Update (change in props & states)
- Unmounting
Mounting (initialization)
Main job of React is to figure out how to modify the DOM to match the components want to be rendered on the screen. For this, mounting is performed.
This level consists of 4 functions group by their running order.
- constructor
- componentWillMount
- render
- componentDidMount
constructor
This is first method which is called before component is mounted. If we need to initialize states or bind methods, we need to do that under constructor.
componentWillMount
This method is called after constructor. componentWillMount() is invoked just before mounting occurs. It can be useful to make final changes to component before rendering.
Note: It is depreciated and going to be remove after version 17. So, it’s best to move codes to constructor or componentDidMount.
render
render() is third method called. It returns single elements which represents component during rendering process. If there is nothing to return, then return null or undefined. If we don’t want any extra div for wrapping the elements, we can use React.Fragment to wrap the components.
componentDidMount
This is the fourth method where we are able access component DOM nodes and elements. This method is called after mount completion.Main tasks which can be performed under this method are :
- timers/intervals functions
- fetching data
- event listeners
- manipulating DOM
Update Life cycle (change in props & states)
When there is some changes in states or props, various react methods get triggered or called or used.
When a component has state changed:
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
When a component has props changed:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
componentWillReceiveProps(nextProps)
This is the first method to be called in update life cycle. This is invoked when props are passed to component instance. When components properties change, this method get called with new properties. This method allows us to check and see if new props are coming in and we can make choices based on the data.
For further information, check this example where child component receive props from parent component, when that prop get changed, then we can see componentWillReceiveProps gets called in child component.
shouldComponentUpdate(nextProps, nextState)
This is the second function called on properties changes and the first on state changes. By default, this method return true which means whenever there is change in properties React render new version of that component. But sometimes there will be no reason to re-render, at such circumstances, we can return false from shouldComponentUpdate method which will stop the re-render.
To be more clear about this, lets take previous example of componentWillReceiveProps and make some changes to use shouldComponentUpdate . We have input box which change makes re-render the child component. Lets add new condition, if input box have input text length more than 10, then we will not re-render child component.
OK, check this example.
componentWillUpdate(nextProps, nextState)
This function is similar to componentWillMount(). Only difference is that it is called every time component is re-renders. This method is called before render().
Note: You cannot use this.setState() inside this method.
componentDidUpdate(prevProps, prevState)
This method is update version of componentDidMount(). If we need to interact with 3rd party library changes, we can to that inside this method. We can perform DOM related tasks.
Unmounting
- componentWillUnmount
componentWillUnmount
If we want to reverse any setup/tasks that we did in either componentWillMount() or componentDidMount(). Tasks like event listeners, third party library elements should be remove before leaving the UI stack.
Bonus :
There are some new methods in react component life cycle which are rarely used.
static getDerivedStateFromProps(nextProps, prevState) :
This is static method(only available in class level) which can be used instead of componentWillReceiveProps.
getSnapshotBeforeUpdate(prevProps, prevState) :
getSnapshotBeforeUpdate is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this life cycle will be passed as a parameter to componentDidMount.
