React Component Lifecycle: How to use ComponentDidUpdate

Mounting

This phase of the component lifecycle is used to call the method when the instance of the component can be created. It is also called while inserting the component into the HTML DOM. There are a few methods used in the mounting phase;

constructor()

The constructor() method is called before anything else when the component is initiated, and it is the natural place to set up the initial state and other initial values. This method is called with the props as arguments, and you should always start by calling the super (props) before anything else, this will initiate the parent’s constructor method and allows the component to inherit methods from its parent (React.Component).

render()

Rendering is a crucial procedure programmer must manage in front end development. The render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window. It is important to note that this method is not user callable but is a part of the React Component Lifecycle. Within the lifecycle, there are a number of scenarios when render is called;

• After the React component is first instantiated, following the constructor() call.
• After an update to the component’s props
• After a setState() call

componentDidMount()

The componentDidMount() method enables us to execute the React code when the component is already placed in the Document Object Model. All the AJAX requests and the DOM or state updation should be coded in the componentDidMount() method block. After all the elements of the page are rendered correctly, this method is called. After the markup is set on the page, this technique is called by React itself to either fetch the data from an External API or perform some unique operations which need the JSX elements.

Updating

This phase of the component lifecycle is triggered as soon as any changes are found in terms of state or props that allow the DOM to be re-rendered again and again to update the DOM elements. The updating phase includes several lifecycle hooks;

getDerivedStateFromProps

This method 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. The method exists for rare use cases where the state depends on changes in props over time.

shouldComponentUpdate ()

The shouldComponentUpdate () method may be used to let React know if a component’s output is not affected by the current change in state or props. The default behaviour is to re-render on every state change, and in the vast majority of cases, you should rely on the default behaviour.

componentDidUpdate ()

The componentDidUpdate method is called after the component is updated in the DOM. The componentDidUpdate lifecycle method is invoked after the getSnapshotBeforeUpdate. As with the getSnapshotBeforeUpdate method, it receives the previous props and state as arguments. Whatever value is returned from the getSnapshotBeforeUpdate lifecycle method is passed as the third argument to the componentDidUpdate method.

getSnapshotBeforeUpdate()

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what values were before the update. If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise, you will get an error.

Unmounting

The unmounting phase begins when an existing component is removed from the DOM. It includes a single and important lifecycle hook, componentWillUnmount().

Error Handling

This is one of the most crucial phases of the component, error handling is used to trigger an action in case of an error during the component rendering. There are two methods used to manage the errors in the existing component;

ComponentDidCatch()

ComponentDidCatch() was added in React 16 and is used in error boundaries. A component becomes an error boundary if it defines the componentDidCatch method. In this method, this.set State can be called and used to catch an unhandled Javascript error in a child component tree and display a fallback UI instead of the component that crashed. These errors are caught during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Static GetDerivedStateFromError()

This is a complete list of lifecycle phases and component lifecycle hooks that trigger based on each phase and component behaviour. Any of them can be chosen to trigger actions that are reflected in the DOM. In this article, we shall put our emphasis on ComponentDidUpdate(), one of the lifecycle methods under the updating stage.

How to Use ComponentDidUpdate()

This lifecycle method gets called right after a change in props or a state change has occurred. This might happen if new props have been provided by a parent component or an internal state has been changed.

The componentDidUpdate gets called after a render which means that you can access DOM nodes in it. This function receives props and states as parameters. It can also access new props and state with this.props and this.state. It provides the previous pros and state values and in this way it allows you to do a comparison of a before and current snapshot.

Best use-cases of the ComponentDidUpdate() lifecycle;

• API calls after specific conditions have been met
• DOM manipulation after the component has been rendered.
• Update React state or stores like Redux and Mobx after a set of conditions have been met.

React Lifecycle triggers and events are designed to give developers the opportunity to make decisions and take appropriate actions. A component goes through a series of lifecycle events from when it is invoked to when it is destroyed. There are four triggers that kick off these lifecycle events; Intiatilization, Updating State, Updating Props and Unmounting. The componentDidUpdate event is triggered whenever there is a state or props update.

ComponentDidUpdate() has access to three properties, two of which are most often used more than the third. These are prevProps, prevState and lastly, snapshot, which is used less often. ComponentDidUpdate() is invoked immediately after updating occurs and is not called for the initial render. The most common use-case for the componentDidUpdate () lifecycle method is updating the DOM in response to Prop or State changes.

ComponentDidUpdate() can also do network requests as long as current props are compared to previous props. Essentially, a network request may not be necessary if props haven’t changed. You can call setState() immediately in a componentDidUpdate as long as it's wrapped up in a conditional statement.

ComponentDidUpdate() is majorly used to perform some operations which need to be executed only if the DOM is updated. To avoid any performance issues, it is advised to use this method with conditional loop;

The componentDidUpdate is also particularly useful when an operation needs to happen after the DOM is updated and the update queue is emptied. It’s probably most useful on complex renders and state or DOM changes or when you need something to be the absolute last thing to be executed.

This updating method is also the best point in the lifecycle to perform an interaction with a non-React environment like the browser or making HTTP requests. This should be done as long as you compare the current props to the previous props to avoid unnecessary network requests.

Conclusion

The componentDidUpdate method is very useful and finds many applications in React, which itself is an extremely powerful JavaScript framework. Understanding how the component lifecycle works, how and when each method is called, will present immense possibilities with the framework. A react lifecycle goes through the stages of mounting, updating, unmounting, and error fixing. ComponentDidUpdate method is called once any updates of state or props have occurred and this is in the update stage.

Some ComponentDidUpdate’s use cases include API calls after specific conditions have been met, DOM manipulation after the component has rendered, and generally, any operations that are executed only after the DOM has been updated. However, it is important that conditional loops are used whenever this method is to be applied as this prevents any performance issues that may arise.

If you found this post informative then why not check out our previous guide on the best Java tutorials or our previous post all about Babok?