componentDidMakeSense — React Component Lifecycle Explanation

Learn the React lifecycle methods and when/how to use them

React is incredible because it allows you to build your UI using a declarative API. You tell React what you want the interface to look like, and it handles the rest.

As users interact with the application, the state changes which causes updates to the DOM. React provides a set of methods to seamlessly intercept the changes at any point during the updates and take control of the UI. The component lifecycle is typically one of the final pieces to truly mastering React, and this article will ensure that you have a firm grasp.

The lifecycle of a component can be defined as the time from when the component is first being inserted into the DOM, the entire time the component is in the DOM, and the point when the component is being removed from the DOM. There is a unique lifecycle for every React component in your code.

Overview of the lifecycle

The lifecycle methods are hooks to allow you to read state changes and control UI updates. The lifecycle can be broken down into 3 categories:

Mounting: The component is being added to the DOM. Updates: The component receives changes props or state and is called when the component is being re-rendered. Unmounting: The component is being removed from the DOM.

The lifecycle methods provide entry points to take over any of these steps. Any method that begins with componentWill means you access it before the event occurs and any method prepended with componentDid means you capture it after the event occurs.

Mounting

constructor()

componentWillMount()

render()

componentDidMount()

Updating

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Unmounting

componentWillUnmount()

constructor

This method is called when your component is being created and before mounting (being added to the DOM). Its primary use is to initialize state and .bind(this) for the component’s methods. If you do neither of these, then there is no need for a constructor.

componentWillMount

This method is executed right before a component is added to the DOM / render() . It is generally recommended that you use the constructor , but this method is still included in the API mostly for backwards compatibility.

You should avoid calling any functions that cause side effects in this method as setState won’t trigger a change and there is no DOM to interact with.

Note that this is also the only lifecycle method called on the server.

componentDidMount

Your component has now been rendered and exists in the DOM. This is the point when you should initiate AJAX requests, add event listeners, and perform any set up that requires a DOM. Calling setState during this method or any time after will cause a re-render.

componentWillReceiveProps

When your component receives new props from its parent, componentWillReceiveProps(nextProps) is triggered. This is a great time to check if there are changes in the incoming props when compared to your current props and trigger a state change based on the new values. A common use-case for this is resetting state based on a change.

shouldComponentUpdate

This method exists purely for performance improvements. Renders and reconciliations are expensive in React. shouldComponentUpdate(nextProps, nextState) provides the developer the ability to return a boolean true/false from this method which controls whether React should perform the reconciliation operations and DOM updates.

The default behavior is for React to render every update, which works in most cases. If shouldComponentUpdate() returns false , then componentWillUpdate() , render() , and componentDidUpdate() will not be invoked.

componentWillUpdate

React invokes this method immediately before rendering when new props or state are being received. There is not much use for componentWillUpdate(nextProps, nextState) and should probably be avoided (similar to componentWillMount ). You should not do anything that would change the state at this point — use componentWillReceiveProps if you need to do anything before a render.

Note that this method is not called on the initial render.

componentDidUpdate

Immediately after React builds you a shiny new UI, componentDidUpdate(prevProps, prevState) is invoked. This is a great time to interact with the DOM or instantiate a new network request based on what the new interface should look like.

componentWillUnmount

Your component had a great life and now it’s time for it to leave the UI. This is the moment to clean up everything that was associated with adding and maintaining your component while it was living on the UI.

BONUS: componentDidCatch