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.
Understanding React v16.4+ New Component Lifecycle Methods_A hands-on guide to React’s new component lifecycle methods; build a simple music player!_blog.bitsrc.io
React and it’s user interface
“ReactJs is a javascript library for building user interfaces” is official one liner introduction about ReactJs.
What is User Interface?
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.
What is lifecycle methods and why it is important?
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.
Four phases of a React component
The React component, like anything else in the world, goes through the following phases
- Initialization
- Mounting
- Update
- Unmounting
The following image is the visual representation of the phases and the methods of ReactJs lifecycle.
ReactJs lifecycle phases and methods
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.
1) Initialization
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 thesetState method.
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.
2) Mounting
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
-
componentWillMount is executed just before the React Component is about to mount on the DOM. Hence, after this method the component will mount. All the things that you want to do before a component mounts has to be defined here.This method is executed once in a lifecycle of a component and before first render.Usage: componentWillMount is used for initializing the states or props, there is a huge debate going on to merge it with the constructor.
- render mounts the component onto the browser. This is a pure method, which means it gives the same output every time the same input is provided.
The render method for our music player may look like this
-
componentDidMount this is the hook method which is executed after the component did mount on the dom. This method is executed once in a lifecycle of a component and after the first render.As, in this method, we can access the DOM, we should initialize JS libraries like D3 or Jquery which needs to access the DOM.Usage: In our Contra music player app, we want to draw the sound wave graphs of the full song, this is the right method to integrate with the D3 or other third party Javascript libraries.
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.
Where to integrate API calls in ReactJs? — componentWillMount vs componentDidMount_Every React application which wants to fetch data or send data to the server needs to integrate APIs._hackernoon.com
Please refer the above blog post to know more about integrating API calls.
3) Update
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
-
shouldComponentUpdate tells the React that when the component receives new props or state is being updated, should React re-render or it can skip rendering? This method is a question, should the Component be Updated? Hence this method should return true or false, and accordingly the component would be re-rendered or skipped. By default, this method return true.Usage: The example is one of the cases where I would like to re-render the component only when the props status changes.
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.
-
componentWillUpdate is executed only after the
shouldComponentUpdatereturns true. This method is only used to do the preparation for the upcoming render, similar to componentWillMount or constructor.There can be some use case when there needs some calculation or preparation before rendering some item, this is the place to do so. - render And then the component gets rendered.
- componentDidUpdate is executed when the new updated component has been updated in the DOM. This method is used to re trigger the third party libraries used to make sure these libraries also update and reload themselves.
The list of methods that will get called when the parent sends new props are as follows:
-
componentWillReceiveProps gets executed when the props have changed and is not first render. Sometimes state depends on the props, hence whenever props changes the state should also be synced. This is the method where it should be done.The similar method for the state doesn’t exist before state change because the props are read only within a component and can never be dependent on the state.Usage: This is how the state can be kept synced with the new props.
The rest of the methods behave exactly same defined above, in terms of state as well.
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
4) Unmounting
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
-
componentWillUnmount This method is the last method in the lifecycle. This is executed just before the component gets removed from the DOM.Usage: In this method, we do all the cleanups related to the component. For example, on logout, the user details and all the auth tokens can be cleared before unmounting the main component.
Do let me know your thoughts in comment section. And if this article helped you, then you can buy me a coffee 😊