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.