React Lifecycle Methods
Class components Life cycle methods
React Life cycle methods can be found in react class components. These life cycle methods were changed time to time with the update of react versions. The life cycle methods covered in this article can be found in react version 16.4 or above.
We can override these react life cycle methods by understanding the scenario behind them. Let’s looking to the 4 main categories of react lifecycle methods.
1. Mounting
Mounting methods are called when a new instance of a react component is being created or inserted to the DOM (Document Object Model).
During the mounting phase there are 4 methods as following.
1. Constructor
⏩ When get fired
Constructors are the functions which are getting called in the initialization of the component. When a new component is created the constructor is getting called.
⏩When can used / override this method
- When need to initialize the state — Only place to directly change the state in class components
- When binding event handlers
# Should not cause side effects by calling ajax calls such as HTTP requests within constructor method
2. Static Method — GetDerivedStateFromProps
This method is rarely getting used.
⏩ When get fired
This method is getting fired when the state of the component depends on changes in props overtime.
⏩ When can used / override this method
- When the state of the component depends on the changes of the props passed to the component.
# Should not cause side effects by calling ajax calls such as HTTP requests within this static method
3. Render
Render function is a pure function. In order to be a pure function that function need to have the following features.
- A pure function does not use any external data to obtain the return value. In other words a pure function uses only the inputs of the function to get the return value.
2. A pure function has no side effects. This means when you run a pure function it does not change anything outside the function.
3. A pure function will give the same output every time as long as the inputs remain the same.
⏩ When get fired
Render method get called when need to generate the return value of the component as a JSX (JavaScript with HTML) component
⏩ When can used / override this method
When need to read the props and state and return the JSX needed to generate the UI.
# Render method doesn’t change the state
# Render method doesn’t interact with DOM
# Render method doesn't create ajax calls
If there are child components within the parent component, all the child components lifecycle mounting methods (including componentDidMount) will get competed within the parent component’s render method.
4.ComponentDidMount
⏩ When get fired
Invoke immediately after component and its child components render to the DOM.
⏩When can used / override this method
- This is the perfect method to invoke the side effects by requesting different data via ajax calls
- When need to interact with the DOM, ComponentDidMount method can be used
💥 Execution Order of Mounting Methods
In order to avoid unexpected behaviors, it is necessary to know the order of execution.
If there is a child component within the parent component the child component’s mounting methods will executed within the render method of parent component as following.
2. Updating
Updating methods get fired due to a change in the props or states of the component. Due to this, the component gets re-rendered.
In the update phase of the react life cycle there are 5 methods as following.
1. Static Method — GetDerivedStateFromProps
This method is rarely getting used in the updating phase. Gets the current values of state and prop as parameter values and return NULL or an object with updated state of the component.
⏩ When get fired
This method is getting fired every time the component is re-rendered.
⏩ When can used / override this method
- When the state is depending on the changes of the props passed to the component.
# Should not cause side effects by calling ajax calls such as HTTP requests within constructor method
2. ShouldComponentUpdate
This method receives the updated props and updated states as a parameter value and re-render the component with the latest values of props and states.
This method can handle whether to re-render the component or not.
By default the all the components get re-rendered when there’s any change in state or the props received.
Used to Optimize the performance of an application.
Rarely used lifecycle method.
⏩ When get fired
This get fired only when a change happens in the states and props passed into the component.
⏩ When can used / override this method
- If an application needs to forcefully stop the default re-rendering of a component after a state or a prop change this method can be used
# Should not cause side effects by calling ajax calls such as HTTP requests within constructor method
# Should not use the setState Method within this ShouldComponentUpdate method
3. Render
- Just as explained in the Mounting phase, this method reads props and states and return a JSX during a change of a state or a prop passed into the component.
4. GetSnapshotBeforeUpdate
This is also a rarely used updating lifecycle method.
This method takes the state and prop value before it gets updated and then return a null or a value which can be again passed into the ComponentDidUpdate Method as a parameter value.
⏩ When get fired
This method gets called right before the changes from the virtual DOM reflected in the real DOM.
⏩ When can used / override this method
- When need to capture information form the real DOM.
ex: Get the mouse point location of user before update and after update maintain the mouse point location
5. ComponentDidUpdate
This method helps to ensure that component and its child components are properly rendered after the update of state or props.
ComponentDidUpdate method in the Updating phase, gets 3 parameter values as previous state, previous props and snapshot value which was returned from the ‘getSnapshotBeforeUpdate’ method.
⏩ When get fired
After the render is finished in the re-render cycle fired after the update.
⏩ When can used / override this method
- This is the perfect method to invoke the side effects by requesting different data via ajax calls
- When need to interact with the DOM, ComponentDidMount method can be used
💥 Execution Order of Updating Methods
In order to avoid unexpected behaviors, it is necessary to know the order of execution.
If there is a child component within the parent component the child component’s mounting methods will executed within the render method of parent component as following.
3. Unmounting
Unmounting methods are called when the component is removed from the DOM.
In the Unmounting phase there is only one method as following
1. ComponentWillUnmount
Used to perform necessary cleanups before unmounting or destroying components.
⏩ When get fired
Method is invoked immediately before a component is unmounting & destroyed.
⏩ When can used / override this method
- When need to cancel network requests
- When need to remove event handlers
- When need to cancel any subscriptions
- When need to invalidate timers form setTimeout or setInterval
# Shouldn’t use setState method within this.
4. Error Handling
Error Handling methods are called when an error occur during the render of lifecycle methods or in the constructor of child components. Don’t catch errors inside the event handlers.
When an error occurs it is necessary to identify the error location and display a fallback UI instead of going into a broken stage due to run time errors.
In order to take use of these error handling methods, it is better to implement a common error boundary component and invoke these life cycle methods.
In the error handling stage there are 2 methods as following.
1. Static Method — GetDerivedStateFromError
⏩ When get fired
When an error occurred in the rendering
⏩ When can used / override this method
- Used to render a fallback UI after an error thrown
According to the above error boundary component, it will return a heading as ‘There was an error’ instead of runtime error in the production mode.
*In the developer mode it will shows the error page as the default page even though it was error bounded with a UI component like this. Simply close it via the close button in order to preview the error UI.
2. ComponentDidCatch
⏩ When get fired
When an error occurred in the rendering
⏩ When can used / override this method
- Used to log the error information
- React automatically logs the error in the console. This method can be used to log the error object information to investigate the error in deep.
- A class component can convert into an Error Boundary by defining either or both getDerivedFromError and componentDidCatch Lifecycle Methods.
Hope this article helped you to have a better understanding on React Lifecycle Methods !
Wish you good luck on performing well on your project with a better understanding on React Lifecycle Methods !
Follow me for the upcoming articles….
If you like this article, let us know with your claps!
