|
Answer» There is a type of re-rendering, which happens to all child components when the parent component re-renders. It also happens when you are using a React-redux model and the server call request have been completed and you have just received NEW props in mapStateToProps(). - The “componentWillReceiveProps()” will be called whenever the component receives a new set of props. This lifecycle method is a case of common use, when we receive props BACK from redux in mapStateToProps(). After that we can set the STATE depending on props, as calling this.setState here will not cause a re-render.
componentWillReceiveProps(nextProps) {
if (this.props.chinaPopData !== nextProps.chinaPopData) {
this.setState({
chinaPopData: nextProps.chinaPopData.map(item => {return {name: item.aged, value:item.totaled}}))
});
}- The “shouldComponentUpdate()” lifecycle method is an method, by which we can decide whether to render a component or not. It is mainly used to increase the performance of poor performing components.
If we return false, it means React will not execute the lifecycle methods - componentWillUpdate() and componentDidUpdate() and also the render() If it is not used in the project, then React internally gives the default value of true to it. - The next to execute is the lifecycle method “componentWillUpdate()”. This method is called before the render(), but not during the initial first render. It can be used as a REPLACEMENT of componentWillReceiveProps() because it is called whenever props are passed to the component or state is changed.
- Next, the render() of the component is called and with it, all child components(if any) will be called.
- Lastly the “componentDidUpdate()” lifecycle method will be called. This method is called after the render(). It is a GOOD place to work with any third party library requiring access to the DOM, like a jQuery plugin.
|
