Now that you’re done with your first project, you are on your way to becoming advanced with React. So let’s talk about some more advanced topics. The first will be lifecycle methods. This is an incredibly important topic, so pay close attention and make sure you understand everything.
Lifecycle methods are special methods built into React, used to operate on components throughout their duration in the DOM. For example, when the component mounts, renders, updates, or unmounts. You already know the most important lifecycle method, the
render method. Soon you will know a few more, with a good understanding of when to use them and what tasks should be done within them.
One important thing to notice is that lifecycle methods can only be used in
class components. In functional components we have other options. But more on that in the next lesson. Let’s begin.
By the end of this lesson, you should be able to:
- Explain the lifecycle of a component
- Explain the most important lifecycle methods
- Explain which tasks should be triggered at the various lifecycle stages of a component
As stated in the introduction, a component’s lifecycle is the sequence of stages an instance of a component goes through in the DOM (or virtual DOM in React’s case). Here’s a quick example:
- Creation of the component (componentDidMount)
- Render of the component (render)
- (Optional) Update of the component (componentDidUpdate)
- Death of the component (componentWillUnmount)
A component can be in different states of its “life”, and in React we can use those states to handle certain tasks.
As the name already suggests, this method is run when the component is mounted, meaning when it is inserted in the DOM tree.
Common tasks that are done in this method are:
- Set Timers using setTimeout or setInterval
- Add event listeners
We are already familiar with the render method in React, each class component needs to contain a render method, and it is fairly simple to understand. The render method contains all the logic your component should display on the screen. It might also contain a null value, if you don’t want to show anything. (Conditional Rendering)
This method is not called for the initial render, but it is called any other time that the component updates. This means that this method is prone to infinite loops if used to update state in a way that would cause a re-render, and so it should include a conditional statement to prevent that. For example, it could compare the new props with the previous props to make sure some value changed.
This method is a great place to work and operate on the DOM when the component has updated. It is also useful to send network requests when specific conditions are met. For example, if a user changed accounts, we could now fetch the data for that new account during this lifecycle method.
This is the last lifecycle method, which will be called when the component is removed from the DOM tree. Usually you would do cleanup tasks in this method. This often includes cleaning up what you added in the componentDidMount method.
A few examples are:
- Remove event listeners
- Cancelling network requests
- Other cleanup routines
- Read this article for a great overview of lifecycle methods in React.
- The React documentation is always a good source as it’s well structured. In this article you can read more about lifecycle methods from the people who made it!
- Code along with this video, it gives you a practical example about how those methods work and when React calls them.*
*If you coded along with the last video, and you used
create-react-app to setup your environment, you may have noticed that the last lifecycle method talked about,
componentDidCatch, does not function the same way for you as in the video. You can read about it here. Also, while coding along, you may have noticed that whenever the counter component mounts for the first time, it automatically gets unmounted and remounted. This is happening because of a feature introduced in React 18. You can read about it here.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.
- Here is another great resource for understanding React Lifecycle methods
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.