There’s a lot going on with a component that we don’t realize, but before we get into it we need to discuss a term and that is mounting. You might remember from our initial discussion on React that React works with virtual DOMs that update the real DOM as needed. Mounting is the process of converting the virtual components into actual DOM elements.
Now that we understand mounting let’s start talking about the lifecycle of components. If you are like me, you might be asking yourself why this is important and let me tell you that it’s important because there are times when we want React to do something at different parts of the mounting process.
There are about 4 different parts of the lifecycle that you will find yourself using, there are more but let’s just stick with the 4 most common ones for this part.
React gives us “hooks” where we can add our functionality into the lifecycle. They are predefined times that we tap into. I think they are called hooks because like a hook it holds that spot in time open you can insert your code. But that’s just me and how I remember it.
componentWillMount()/componentDidMount()
These lifecycle hooks happen when the component itself has actually been mounted in the browser. One is called just before the component is about to be mounted on the page and the other is called just after the component has been mounted.
This is useful for when we fetch data from an API or database and we want the data to be rendered at the same time as the component.
componentWillUpdate()/componentDidUpdate()
Sometimes we want to update some data of our component before or after we change the actual rendering.
componentWillUpdate is a chance for us to handle configuration changes and prepare for the next render. Just be careful that you don’t call this.setState() it as it can cause an infinite loop.
The componentDidUpdate is particularly useful when an operation needs to happen after the DOM is updated and the update queue is emptied. It’s probably most useful when you need something to be the absolutely last thing to be executed.
componentWillReceiveProps()
This will happen when a component is about to receive new props. This method is called when props are passed to the Component instance. Let’s dig a little deeper into what this means.
Here’s an example. Let’s say that we have a canvas element. Let’s say we’re drawing a nice circle graphic on there based on this.props.percent.
When we receive new props, If the percent has changed, we want to redraw the grid.
Using this method we can update our state based on new props.
componentWillUnmount()
It’s almost over.
Your component is going to go away. Maybe forever. It’s very sad.
Before it goes, it asks if you have any last-minute requests.
Here you can cancel any outgoing network requests, or remove all event listeners associated with the component.
Basically, clean up anything to do that solely involves the component in question — when it’s gone, it should be completely gone.
Conclusion
These are a few of the lifecycle hooks we can use. It’s a good idea to be familiar with them and when they run. You’ll never know when one will come in handy in your application. Sometimes you need to exact a little more control over how and when your component is updating.
Claudia Maciel 