This blog post is for the React version less than 16.3.
In React v16.3 there has been significant changes in component lifecycle methods. If you are using React greater than 16.3 please refer the following blog post.
The user interacts with application by clicking, hovering, pressing a key or performing many other events on UI components. All UI components take birth in the browser and would die at some point of time. The whole interface is governed by one God, that is the user.
The user interface is a multi option playground where the user can do anything and libraries like ReactJs helps us creating that playground.
Around us everything goes through a cycle of taking birth, growing and at some point of time it will die. Consider trees, any software application, yourself, a
div container or UI component in a web browser, each of these takes birth, grows by getting updates and dies.
The lifecycle methods are various methods which are invoked at different phases of the lifecycle of a component. Suppose if we are creating the YouTube app, then obviously our app will use the network to buffer the videos and it spends the battery power (let’s assume only these two).
If the user switches to another application after playing the video, then being the awesome developers, we should make sure we are using the resources like network and battery in the most efficient manner. Whenever the user switches to another application, we can stop/pause the buffering of the video, which will stop using the network and battery.
This is what the lifecycle methods in ReactJs provide us, so that the developer can produce a quality application and make sure the developer can really plan what and how to do at various points of birth, growth or death of UI interfaces.
Having a great understanding about the component lifecycle would excel your ability to develop quality ReactJs user interfaces.
The React component, like anything else in the world, goes through the following phases
The following image is the visual representation of the phases and the methods of ReactJs lifecycle.
To visualize the implementation of these lifecycle hooks we will create a music player React app named Contra music player. Let’s start our discussion on these phases.
In this phase the React component prepares for the upcoming tough journey, by setting up the initial states and default props, if any.
Contra Music player app’s initializations would look like
The component is setting up the initial state in the constructor, which can be changed later by using the
defaultProps is defined as a property of Component to define all the default value of props, which can be overridden with new prop values.
By rendering like
<ContraMusicPlayer/> Contra Music player will start with volume 70% in paused state with dark theme.
By rendering like
<ContraMusicPlayer theme="light"/> Contra Music player will start with volume 70% in paused state with light theme.
After preparing with basic needs, state and props, our React Component is ready to mount in the browser DOM. This phase gives hook methods for before and after mounting of components. The methods which gets called in this phase are
The render method for our music player may look like this
The following example shows the setup of highcharts when the DOM is ready
Where should you make the API calls?
The API calls should be made in componentDidMount method always.
Please refer the above blog post to know more about integrating API calls.
This phase starts when the react component has taken birth on the browser and grows by receiving new updates. The component can be updated by two ways, sending new props or updating the state.
Let’s see the list of hook methods when the current state is updated by calling setState
This method is generally used when rendering is a very heavy method, then you should avoid render every now and then. For example, suppose for every render, the component generates thousand prime numbers, let’s consider some app has this kind of logic, then we can control when it is required then only the component is rendered.
shouldComponentUpdatereturns true. This method is only used to do the preparation for the upcoming render, similar to componentWillMount or constructor.
The rest of the methods behave exactly same defined above, in terms of state as well.
In this phase, the component is not needed and the component will get unmounted from the DOM. The method which is called in this phase
Do let me know your thoughts in comment section. And if this article helped you, then you can buy me a coffee 😊