React Component Lifecycle Overview

React Component Lifecycle Overview

What is React Component Lifecycle React Component Lifecycle Mounting React Component Lifecycle Updating React Component Lifecycle UnMounting React Component Lifecycle Error Handling React Component Lifecycle - Constructor React Component Lifecycle - Render React Component Lifecycle - getDerivedStateFromProps React Component Lifecycle - componentDidMount React Component Lifecycle - shouldComponentUpdate React Component Lifecycle - getSnapshotBeforeUpdate React Component Lifecycle - componentDidUpdate React Component Lifecycle - componentWillUnmount React Component Lifecycle - componentDidCatch

componentDidCatch example

The componentDidCatch life-cycle method is invoked when an exception is thrown in its child component hierarchy. Components which implement componentDidCatch are called Error Boundary components. These components act as catch {} blocks to capture exceptions.

The following example has 3 components
ErrorBoundaryComponent - Implements componentDidCatch, acts as a catch {} block to capture errors in child components.
ChildComponent - Actual UI component, encapsulated in ErrorBoundaryComponent
RootComponent - This is the bootstrap component which launches the application.

React Component Lifecycle - componentDidCatch

The componentDidCatch life-cycle method is used to create special Error Boundary components. Prior to react v16.0 there was not structured way of error handling, if a component throws an exception then the application will crash and we might have to refresh the page.

To overcome this React v16.0 introduces error boundaries. Error boundaries are special components which catch errors in its child component hierarchy and display a custom error / fallback UI. Error boundaries handle any errors in the render(), constructor or any of the component life cycle methods in its child component hierarchy.

React Component Lifecycle - componentWillUnmount

The componentWillUnmount life-cycle method will be called when a component is being removed from DOM. This method can be used to perform any required cleanup operation like cancelling pending network requests, cancelling subscriptions etc.

This is the only life-cycle method invoked in the component un-mounting phase.

Below is the syntax for componentWillUnmount

componentWillUnmount() {
  // perform cleanup operation here.
}

React Component Lifecycle - componentDidUpdate

The componentDidUpdate life-cycle method is the last life-cycle method invoked in the update phase. This method will be invoked after render() and can be used to operate on DOM after the component is updated. Similar to componentDidMount this method can be used to make Ajax/Api calls. Note that any change in the state/props due to the Ajax calls will re-trigger render(). We should make sure that any change to the state in this method is wrapped with proper conditions so as to avoid infinite loops.

shouldComponentUpdate example

The shouldComponentUpdate life-cycle method is invoked in the update phase before the render(). This method will be invoked when the component receives new state or props, this method can be used to prevent re-rendering of the component. If shouldComponentUpdate returns false then render() will not be triggered. By default render() will be called for any state change, this method can be used to override the default behavior and prevent re-rendering of the component.

The following example uses shouldComponentUpdate() to check the value of the state "counter", compares the previous value of the state and the current value of the state in the shouldComponentUpdate method and return true only when the state value is changed, this will trigger render(). If the state value of counter did not change it returns false and render() will not be called. We can check if render is called by looking at the console, since 'Render called.' is written to the console whenever render() is triggered.

React Component Lifecycle - shouldComponentUpdate

The shouldComponentUpdate life-cycle method is invoked in the update phase before the render(). This method will be invoked when the component receives new state or props, this method can be used to prevent re-rendering of the component. If shouldComponentUpdate returns false then render() will not be triggered. By default render() will be called for any state change, this method can be used to override the default behavior and prevent re-rendering of the component.

This method has access to this.state, nextState, this.props & nextProps, hence we can compare current state/props with next state/props and make a decision if we have to prevent re-rendering of the component. The purpose of this method is to help in preformance optimization by preventing re-rendering of components on specific conditions.

Below is the syntax for shouldComponentUpdate

React Component Lifecycle - getSnapshotBeforeUpdate

The getSnapshotBeforeUpdate life-cycle method is invoked before the DOM is updated. We can use this method to capture any settings / position information from the DOM before it gets updated. We can pass value from this method to the componentDidUpdate life-cycle method as a third parameter. Any value returned from this method will automatically be passed to the componentDidUpdate method.

componentWillReceiveProps example

The componentWillReceiveProps life-cycle method is used to check any change in prop values and update the state of the component if required. This life-cycle method has access to both the previous set of props and new set of props hence we can compare them and update the state if required.

The componentWillReceiveProps life-cycle method will get deprecated, React 16.3 introduced a new life-cycle method getDerivedStateFromProps, which should be used to check prop value changes going forward.

The following example uses componentWillReceiveProps() to check the value of the prop "parentColor", compare the previous value of the prop and the current value of the prop and updates the state if the prop was changed. Any change in state value updates the color of the box displayed in the UI.

getDerivedStateFromProps example

The getDerivedStateFromProps life-cycle method is invoked before calling the render method, both during the initial mounting phase and the update phase. This method returns an object which will be updated in the components state, if no state change is required this method returns null.

The following example uses getDerivedStateFromProps() to check the value of the prop "parentColor", compare the previous value of the prop (saved in the state variable prevColor). If the prop value is different from the previous value then the state value of "bgColor" is updated, which in-turn updates the color of the box displayed in the UI.

React Component Lifecycle - getDerivedStateFromProps

The life-cycle method is invoked before calling the render method, both during the initial mounting phase and the update phase. This method returns an object which will be updated in the comgetDerivedStateFromProps ponents state, if no state change is required this method returns null. The main purpose of this method is to update the state based on changes to props.

This is a new life-cycle method introduced in React 16.3, intended to replace the legacy life-cycle method componentWillReceiveProps. This life-cycle method can be used for purposes like displaying Transition animation by comparing previous and next props, handle dynamic scrolling by using previous and next props to decide whether to scroll up or down. This method get called for every render, hence if possible we should avoid using this method with other alternatives.

This life-cycle method is static, hence it does not have access to "this" and we cannot access this.state inside this method, hence it provides the previous state in its 2nd parameter.

Below is the syntax for getDerivedStateFromProps

ComponentDidMount example

The componentDidMount life-cycle method is the last lifecycle method executed in the component mounting phase. componentDidMount() is invoked immediately after the component is mounted.

The following example uses ComponentDidMount() to alter the state property "title", in this example we will not make any api calls, but will use setTimeout() to inject a 1 second delay in setting the state. The state change will re-trigger render() and the updated state will be displayed in the browser.

React Component Lifecycle - componentDidMount

The componentDidMount life-cycle method is the last life cycle method executed in the component mounting phase. componentDidMount() is invoked immediately after the component is mounted.

Any initialization to the component which requires the DOM nodes should be done in this method. In this method we can perform activities which require DOM layout like measuring DOM element size etc. We can also alter the state based on the DOM element / layout.

React Component Lifecycle Error Handling

When an error occurs while rendering a react component or when an error occurs anywhere in the components life-cycle method or in the constructor of any of its child components the following life-cycle method is invoked.

componentDidCatch()

React Component Lifecycle UnMounting

When a React component is unmounting, i.e when the component is removed from DOM, the following lifecycle method is invoked.

componentWillUnmount()

React Component Lifecycle Updating

When a React component is updating the following life cycle methods are invoked in the specified order. An update to a React component can be caused by a change in its state or props or by calling forceUpdate()

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

React Component Lifecycle Mounting

When a React component is mounting / initializing the following life-cycle methods are invoked in the specified order.

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

What is React Component Lifecycle

React applications are composed of Component, each component has several “life-cycle methods” that you can override to alter the behavior of the components.

There are some updates to the component life-cycle methods in React 16.3.
3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.

The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0