React was designed to allow developers to create complex and highly interactive UIs. React components can quickly adapt to changes from user interactions or updates on the site. In order to enable this, all React’s components have a lifecycle which you can monitor and manipulate during its three main stages: creation, updating, and deletion.
You can think of lifecycle methods as opportunities for you to manipulate how the components of your application reacts to different changes in your app. They are called lifecycle methods, because they are called at different stages in the component’s lifecycle — just before it’s created, after it’s created, and when it’s about to be deleted.
These phases are referred to as: Mounting, Updating, and Unmounting.
Pre-Mounting
It is important to note that components are just JS classes. In the pre-mounting stage, the class’s constructor function is called and the component is going to start its journey by setting up the state and the props. The constructor is not related to mounting to the dom it is just the first function called upon the initialization of a component.
Mounting
Mounting is the stage during which a component is created and inserted onto the DOM and happens just after the initialization stage is completed. At this phase, there are two lifecycle methods available to us: componentWillMount, and componentDidMount.
1. componentWillMount()
The componentWillMount() method is primarily used to implement server-side logic before a component mounts on the DOM happens, for example making an API call to the server.
2. componentDiDMount()
The componentDidMount() method is called just after the after the component gets mounted on the DOM. This method is used to set up any long-running or asynchronous processes such as fetching and updating data. The componentDidMount() allows us to make API calls and update the state with the API response.
Updating
Every time a component’s state or props changes, the component is being re-rendered on the page. A re-render could be triggered when a user interacts with the component, or when new props or state are passed in.
The methods that are available during this stage are:
- shouldComponentUpdate()
The shouldComponentUpdate() method is called just before the component is about to re-render and this method determines whether a component should re-render or not. It allows us to compare the previous and new props and state and prevent unnecessary re-renders.
2. componentWillUpdate()
The componentWillUpdate() method is invoked once after the shouldComponentUpdate() method, just before the re-rendering of the component takes place. This method also receives arguments like Previous Props and State.
3. componentDidUpdate()
The componentDidUpdate() method is called just after the component is rendered and updated. Just like the above two methods, the componentDidUpdate() method also receives arguments like Previous Props and State.
Unmounting
During the unmounting stage, the component gets deleted from the page. The only lifecycle method available at this phase is componentWillUnmount(), which is called just before the component gets deleted.
Summary:
