React JS — Life Cycle of Components
React have many methods or “hooks” that are called during the lifecycle of an component, which allows us to update the UI and application state. Here we are going to discuss more about it and will see when to use which lifecycle method.This is applicable from the React v16.4.
Here goes the lifecycle cheat diagram
Lifecycle can be divided into three phases - Mounting,Updating and Unmounting.
During Mounting, the following methods are called in order —
constructor → getDerivedStateFromProps →render →componentDidMount.
During Updating, the following methods are called in order —
getDerivedStateFromProps →shouldComponentUpdate, →render, →getSnapshotBeforeUpdate →componentDidUpdate
During Unmounting, only componentWillUnmount is called.
For error handling, in a lifecycle method or in the constructor of any child component, we can use componentDidCatch.
Note : In the list above, commonly used lifecycle methods are marked as bold. The rest of them (Bold+italics) exist for relatively rare use cases.
The constructor for a React component is called before it is mounted. Constructor is the only place where you should assign
this.state directly. In all other methods, you need to use
this.setState() instead. Avoid introducing any side-effects or subscriptions in the constructor.
Use : set initial state and Binding event handler methods.
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
static getDerivedStateFromProps(props, state)
Use : It enables a component to update its internal state as the result of changes in props.
Read more about this here
render() method is the only required method in a class component. The
render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.
Use : When called, it should examine
this.state and return one of the following types: React elements, Arrays and fragments, Portals, String and numbers, Booleans or null.
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. You may call
setState() immediately in
componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the
render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the
constructor() instead. It can, however, be necessary for some cases.
Use : load data from a remote endpoint
The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to
true. This method is not called for the initial render or when
forceUpdate() is used.
Consider using the built-in
PureComponent instead of writing
shouldComponentUpdate() by hand.
React.PureComponent is similar to
React.Component. The difference between them is that
React.Component doesn’t implement
React.PureComponentimplements it with a shallow prop and state comparison.
If you are confident you want to write it by hand, you may compare
nextState and return
false to tell React the update can be skipped. Note that returning
false does not prevent child components from re-rendering when their state changes.
Use : This method only exists as a performance optimization.
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to the DOM. Any value returned by this lifecycle will be passed as a parameter to
Use : It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed.
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. You may call
setState() immediately in
componentDidUpdate() but note that it must be wrapped in a condition , or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance. If your component implements the
getSnapshotBeforeUpdate() lifecycle (which is rare), the value it returns will be passed as a third “snapshot” parameter to
componentDidUpdate(). Otherwise this parameter will be undefined.
componentDidUpdate(prevProps, prevState, snapshot)
Use : Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous prop
componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. You should not call
componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.
Use : Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in
Use : Display fallback UI in case of error.