Currently, I’m trying to pick up ReactJs and in the progress of learning. I was following along a tutorial to dive deeper and deeper into React. But I was facing some difficulties to get deeper into it. I am unable to understand wholly on very fundamental of component lifecycle methods in React. So, I decided to have some study on it and note it down to make it clear for me. I hope it will help you too. Let’s begin.
There are 3 main phases of component lifecycle for React such as:
1. Mounting
2. Updating
3. Unmounting
Common Lifecycle Methods
render()
This method is the most common lifecycle method in React. This method using for render component to display UI. When mount or update component, render() is happening. It is pure and without side-effects which setState() cannot happen within.
componentDidMount()
This will happen as soon as component mounted and ready. So this lifecycle method is a good place to write your API calls. When it happens, setState() can be used here to update state. This will happen before browser updates the UI.
