Commonly Used Lifecycle Methods of React Components
In React we can define components as classes or functions. These components have several lifecycle methods which can be invoked at certain times of processing. There are three phases of a component lifecycle. They are Mounting, Updating, and Unmounting.
1. Mounting
This is a phase of putting elements into DOM. Here is where the component renders. The following four methods will be called in order during this phase.
constructor()getDerivedStateFromProps()render()componentDidMount()
2. Updating
This phase occurs whenever there is a need to re-render the component due to any change caused to the state or props of the component. The following five methods will be called in order during this phase.
getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
3. Unmounting
This phase of the lifecycle occurs when there is a component being removed from the DOM. This phase has only one method to be called.
componentWillUnmount()
Commonly used methods among these phases
The constructor() method is needed if we want to initialize any state for our component, in that case, the constructor will be called first to initialize the state of the component. Also inside the constructor, we have to pass the argument called ‘props’ to receive the attributes passed to the components from outside.
The render() method will be always called as it is needed for rendering the component. Other than returning components this method will help to return some other elements such as Arrays, Fragments, Portals, String, and Numbers. This function does not directly interact with the browser, it always returns the specified element to be returned.
The componentDidMount() method will be invoked right after the rendering.
When the above code snippet is executed at first the browser will display ‘The count is 0’ through render() method and thereafter the componentDidMount() will be invoked and the setState() will cause the change to the state of the component which as a result update the component and displays ‘The count is 1’ on the browser.
The componentDidUpdate() method will be invoked after an update occurs to the component. This can be useful when there is a need to compare previous and current props value after an update.
Now once the componentDidMount() function is invoked it will change the state of the component through the setState() method which updates the count value of the component and as a result, the componentDidUpdate() will be invoked which will display an alert box with the message ‘Count is now 1’.
The componentWillUnmount() method will be called immediately before a component is destroyed. This can be used to reset values like timers or to do any clean up process before destroying a component.