REACT COMPONENTS LIFE CYCLE(PART II)

PREAMBLE

Yesterday, we focused on understanding how React component lifecycles work in a general view and we had only concentrated on one of the lifecycles which is the Mounting method, and the various phases therein.

We shall explore yet another of these lifecycle methods, which is the Updating method and its different phases.

UPDATING METHOD

This method is called when a component is being re-rendered because of changes within the props or state. Hence, a change in the states or props triggers this change. Within this method, there are five phases in the following order:

(a) static getDerivedStateFromProps( )

(b) shouldComponentUpdate( )

(c) render( )

(d) getSnapshotBeforeUpdate( )

(e) componentDidUpdate( )

We shall discuss them individually to understand them better.

(a) static getDerivedStateFromProps

static getDerivedStateFromProps(props, state) {
? ? ?console.log("LifecycleA getDerivedStateFromProps");
? ? ?return null;
? ?}        

As we saw in the previous article, this method has rare use cases as it's only called when the state of the components depends on changes in props over time. It's called just before the render( ) method both on initial mount and subsequent updates. This method either returns an object to update the state or returns null as we can see above.

Since its state is static, calling the initial state is not allowed as it doesn't have access to it. Also, calling side effects like HTTP requests are not allowed in this method also.

(b) shouldComponentUpdate

shouldComponentUpdate() {
? ? console.log("LifecycleA shouldComponentUpdate");
? ? return true;
? ?}        

This method receives the updated props or states and dictates if a component should be re-rendered or not. Not all components should be re-rendered especially if the previous and the current state or props are similar to each other with no changes, and so this method handles it by returning false, it compares the previous and current(next) states or props to determine if re-rendering is necessary or not.

Hence, this method ensures performance optimization. Calling the set state method within this method is not a good practice. And it's advised to make use of pure components instead of typing shouldComponentUpdate method manually as it might introduce bugs.

(c) render( )

render() {
? ? ?console.log("LifecycleA render");
? ? ?return (
? ? ? ?<div>
? ? ? ? ?<div>Lifecycle A</div>
? ? ? ? ?<button onClick={this.changeState}>Change State</button>
? ? ? ? ?<LifecycleB />
? ? ? ?</div>
? ? ?);
? ?}
?}


export default LifecycleA        

This method is the only required method. It's capable of reading into props(this.props) and states(this.state) and returns either a React element(JSX), an Array or fragment(React fragments which allows delivering multiple elements from render just like <div> tag), boolean or null. The render method should remain pure(shouldn't change state) as it doesn't directly interact with the DOM or make ajax calls. Children components lifecycles are also executed here as in the image above.

(d) getSnapshotBeforeUpdate

?getSnapshotBeforeUpdate(prevProps, prevState) {
? ? ? console.log("LifecycleA getSnapshotBeforeUpdate")
? ? ? return null


? ? }        

This method accepts previous props and states as parameters and it is called before changes in the virtual DOM are to be introduced or reflected in the DOM.

This method can be used to capture or retrieve some information from the DOM and it either returns null or the captured or retrieved value and this retrieved value is passed as the 3rd parameter to the next method.

(e) componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
? ? ? console.log("LifecycleA componentDidUpdate");
? ? }        

This method is called after render is finished in the render cycles. It accepts three parameters(prevProps, prevState and snapshot(gotten from the previous method)). It is called only once in the render cycle.

This is the best place to make ajax calls but make sure to compare the previous prop to the current prop to determine if this call is necessary or not.

CONCLUSION

I hope you learned something from this article, if so, please do well to connect and follow and your suggestions and possible contributions are highly welcome.