React apps are basically a collection of independent components that run according to interaction with one another. Every component has a lifecycle of its own. It can be defined as the methods that are invoked during different stages of its existence. If we talk about the stages of a component’s lifecycle, it will be as follows.
- Initialization: This is the stage where a component gets initialized with props and states in the constructor function of the component class.
- Mounting: Mounting is the stage where the render method gets called and the JSX gets rendered in the browser.
- Updating: Updating is the stage where your state gets updated and the component gets re-rendered.
- Unmounting: This is where a component gets unmounted or removed from the browser.
1. Mounting: Mounting is the phase where the instance of a component is created and inserted into the DOM. There are four built-in methods that get called while mounting a component.
- constructor(): The constructor method is called first when the component is initiated. The method is called with props as arguments, we should always start with super(props) first, otherwise this. prop will be undefined in the constructor. The super(prop) will initiate the parent’s constructor method and allow the components to inherit parent methods
- getDerivedStateFromProps(): This method is called before rendering the elements into the DOM. It updates the state by taking the state as an argument and returns an object with the changes in the state.
- render(): This method is always required in the class component. It outputs the HTML to the DOM. After getting called it examines this. prop and this. state and returns either react element, arrays and fragments, portals, string, and number, or booleans and nulls.
- componentDidMount(): After the component is rendered the componentDidMount() method is called. We can use this method to grab a DOM node from the component tree immediately after it is mounted.
2. Updating: The next phase in the component lifecycle is updating the component. A component is updated whenever there are changes in the states or props of the component. There are several built-in methods that get called while mounting a component.
- shouldComponentUpdate(): In this method, you return a boolean value React should render or not. By default the value is True.
- render(): The render() method is called after any changes are made, it has to render the HTML to the DOM with the new changes.
- componentDidUpdate(): This method is invoked after the component is rendered. componentDidUpdate() is called after the component is successfully updated into the DOM.
3. Unmounting: This is the last phase in the component lifecycle. The component is unmounted from the DOM in this phase. React has one built-in that gets called while unmounting a component.
- componentWillUnmount(): After the update phase when there are no more changes to be made, the componentWillUnmount() method is called before unmounting and destroying the component. Once the instance of the component is unmounted then it will never be mounted again. Necessary cleanups can be done in this method, such as cleaning up subscriptions, invalidating timers, etc.
