React Lifecycle Methods — React.js
So, four days ago, I decided to learn to React. I started with a React course on Scrimba. For those who don’t know what React is, It’s a JavaScript library for front-end development. You can read more about it on its official website.
When I was learning React, I faced this problem in understanding the React Lifecycle Methods. So I took a deep dive into this, learned it, and decided to share what I learned by writing this small blog.
Before starting, I want you to know that the latest versions of React have determined that the older lifecycle methods are unsafe to use and will be deprecated in the 17 version of React.
🤔 What are the React Lifecycle Methods ?!
Each component in React has several lifecycle methods that you can override to run code at particular times in the process.
- Mounting → Putting elements into the DOM
- Updating → Component is updated
- Unmounting → Removing/destroying an element from DOM
Let’s learn a little more about how they work.
React Component Lifecycle Diagram
The diagram below shows the different React lifecycle methods and when they are invoked.
⚡ Common React Lifecycle Methods
In this blog, I will only talk about some of the most commonly used lifecycle methods.
render()
The render() method is the most commonly used lifecycle method. This is because the render is the only required method within a class component of React. It is used to render the React JSX content into your DOM.
Below is the simple example of render() in React:
componentDidMount()
The componentDidMount() is called after the component is mounted and ready. It signals that the components and their child-components have rendered properly.
This is a good place to initiate API calls if you need to load data from a remote resource. You can do a bunch of things with this method such as set Timers using setTimeout or setInterval, add event listener, or draw an element that you just rendered.
Below is a small example of componentDidMount where at first the value of favoriteColor is red and then we change its state to make it yellow after a set time.
componentDidUpdate()
Components do not always remain in the same state after mounting. This lifecycle method is called as the component updates. It updates the DOM in response to props or state change or when the component has to be rerendered.
Below is a typical example of componentDidUpdate() lifecycle method:
componentWillUnmount()
This lifecycle method will be called before the component is unmounted. This is the place where you can apply all of your cleanup methods such as canceling network requests or removing an event listener.
Below is a simple example of componentWillUnmount() lifecycle method:
👋 That’s all folks, thanks! if you like this post, don’t forget to leave a comment! 🤩
