in Js

Every react component goes through few phases during their life-cycle . React provides many methods or hooks that are called during that phases . Today we will be covering some of the common hooks that we use frequently .

laravel-nepal-Common-react-component-lifecycle

The phases we were talking before were Mount, Update & Unmount In above figure , we have categorized the life cycle hooks in three phases . We will be discussing accordingly .

Phase One : Mount

In this phase , we will be discussing about 3 hooks which we use frequently . These methods or hooks will be called in the following order when an component instance is being created/inserted into the DOM .

constructor() in a react component is called before it is mounted .  When using react constructor we need to call super() method in the constructor() . Let’s look at the syntax and it will be clearer .

Why call super() in our constructor ? First if super() is not used , ‘this’ is not initialized . Even if we are not using ‘this‘ , we need a super() in our constructor according to Es6 (EcmaScript) that says Es6 classes must call super if they are subclasses . We are extending ‘React.Component’ class so we have to call super in our constructor .

Now, when to use this hook ? Basically this hook is used for purposes like assigning the initial state to ‘this.state’ directly and binding event handler methods to an instance . An example taken from the official documentation :

Constructor is the only place where you should assign this.state directly. In all other methods, you need to use this.setState() instead.

Copied from official documentation

render() , this method is only required method in our component class . We need to make this function pure . What i meant by pure is , it should not modify component state and when called should examine props and state resulting react elements , arrays and fragments , strings etc .

componentDidMount() , this method is invoked immediately after a component is mounted . This place will be the good call to work with ajax call and setting state with a new data .

Phase Two : Update

This phase happens only when the state or the props of a component get changed . In this phase , we have two hooks available one as render() and another one as componentDidUpdate() .

componentDidUpdate() , this method or hook is invoked immediately after a component update occurs . This is a good place to do network requests as long as you compare between current props and previous props because network request may not be required if props is the same .

Whenever we give our component a new props or change the state of our component these two methods will be called in order .

Phase Three : Unmount

This last phase occurs whenever a component is removed from DOM  . We have componentWillUnmount() hooks available in this phase.

componentWillUnmount() is invoked immediately before a component is destroyed or unmounted . This is good place for cleaning up things like timers , event listeners and any other things which will prevent memory leaks .

Today we covered some of the frequently used hooks in a react component life-cycle. You can find out more on the documentation . Example and some of the statement are taken from official docuementation of react . For a visual references of the react life-cycle hooks , click here . I hope I’ve managed to shed some light on this for you all . Happy coding 🙂