REACT COMPONENTS LIFE CYCLE

INTRODUCTION

Each component in React undergoes a lifecycle period starting from the period of initialization(mounting), changes(updating and error handling), and termination(unmounting). These lifecycles can be manipulated according to the demands of the project. Therefore, there is no strict adherence or implementation of a particular integration of these lifecycle methods.

There are basically four(4) lifecycle methods namely: Mounting, Updating, Error handling, and unmounting. Each of these methods serves a specific purpose and so, a clear understanding of their individual relevance is advised so as to enjoy the best experience and curtail unnecessary project misbehavior.

In the mounting method; we have four phases: (a) Constructor( ) (b) static getDerivedStateFromProps( ) (c) Render( ) and (d) componentDidMount( )

The Update phase has five methods (a) static getDerivedStateFromProps( ) (b) shouldComponentUpdate( ) (c) Render( ) (d) getSnapshotBeforeUpdate( ) and (e) componentDidUpdate( )

In the Error handling method: (a) componentDidCatch( ) and (b) static getDerivedStateFromError( )

Finally, the Unmounting method has just one phase: (a) componentWillUnmount( ). We shall take the methods, one by one to understand them better.

THE MOUNTING METHOD

As we saw earlier on, this stage or method is called specifically when a new component is being created, initialized and inserted into the DOM. It has four phases which we shall look into, individually. Hence,

(a) Constructor( )

(b) static getDerivedStateFromProps( )

(c) Render( ) and

(d) componentDidMount( )

(a) CONSTRUCTOR( )

This method is the first phase and this function is called whenever a new component is created. Initialization of states is done here as we can see in the image above, just below the constructor method and after the super function has been called.

Calling side-effects or making Ajax requests like hypertext transfer protocol(HTTP) in this method is highly prohibited as it will cause malfunctioning. Also, overwriting the initial state(setting the state) isn't advised in this phase. Hence, the state can only be initialized here. Also, it's highly advised as best practice, to perform the event handler binding here.

Example: this.clickHandler = this.clickHandler.bind(this)

(b) static getDerivedStateFromProps( )

This method has rare use cases as it's only called when the state of the components depend 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 ave access to it. Also, calling side effects like HTTP requests are not allowed in this method also.

(c) render() method

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) componentDidMount( )

This method is called once in a lifetime and invoked immediately after a component and its children has been rendered to the DOM. This is the perfect place to call side effects like HTTP calls and requests but don't forget to unmount by applying componentWillUnmount( ) after causing these side effects especially in the case of subscriptions and set intervals.

Calling the setState function may be done in this phase, doing this will trigger an additional re-rendering, but it will be done before the browser refereshes and updates the screen and so prevents the user from seeing the intermediate render. However, this is not advisable as it might cause serious performance issues.

CONCLUSION

This is a personal reflection on the subject matter, if you learned something, feel free to like or connect. And if you have corrections, additions, or suggestions, I'll greatly appreciate that.