React Lifecycle Methods

Today I’ll be covering React Lifecycle Methods: what they are, how they are used, and the scenarios they will be most useful. Let’s get right into it.

What are Lifecycle Methods?

Lifecycle methods are a library of methods native to React’s built-in Component class. These methods vary in usage as they are called at different moments of a component’s rendering process. React’s process of rendering components can be separated into 3 phases:

• Mount
• Update
• Unmount

Before you read any further, feel free to check out the React Component Documentation and this Diagram.

The LifeCycle Methods

“Unsafe” Methods

With the introduction of React v16.3 in 2018, there are three lifecycle methods that are now considered legacy methods, and therefore have been aliased as “unsafe” methods. You may still use them, however, they are advised against since new React versions have offered safer alternatives.

These methods are componentWillMount(), componentWillReceiveProps(), and componentWillUpdate(). These legacy methods are advised against simply because they are likely to cause bugs in React’s async component rendering. I’m addressing them here and now as they will not be included in the coming sections, since the alternatives have already been implemented to React’s library.

Mount Methods

I’ll be listing methods below in the order that React calls them when a component is being mounted.

• constructor() will click with any developer who is familiar with JavaScript class syntax. This method is typically used to initialize local state or to bind event handler methods to certain instances. Thanks to the ES.next class properties proposal, however, the constructor() method no longer needs to be explicitly defined, as it is implied behind the scenes. Below is a quick comparison:

// ES6
constructor(props) {
 super(props);
 this.state = { loading: false };
 this.handleSubmit = this.handleSubmit.bind(this);
}
// ES.next
state = { loading: false };
handleSubmit = event => {
 event.preventDefault();
}
// constructor and instance binding are implied

• static getDerivedStateFromProps() is rarely used and is also advised to use sparingly. This method enables a component to update its internal state as a result of prop changes. Can take args of state and props. This method is called right before render() and is used to make state changes.
• render() is used to render to React’s DOM. That’s it. That’s the whole thing.
• componentDidMount() is pretty common. Best-case usage is for DOM manipulation and fetch calls. Any kind of initialization that requires DOM nodes is best-used in this method.

Update Methods

Some of the methods for mounting are also used here, as a component mounts again when it is updated. These methods will again be presented in order that they are called.

• static getDerivedStateFromProps()
• shouldComponentUpdate() is a method that returns either true or false to decide if the component should update and mainly exists for performance optimization. Since React’s default behavior is to re-render an entire component on every state change, you can use this lifecycle method to prevent that behavior. However, the documentation advises against this practice and instead encourages the use of PureComponents, which is a default React component that does a shallow prop and state comparison. By default, this method returns true.
• render()
• getSnapshotBeforeUpdate() takes in the arguments of prevProps and prevState. This method’s most common use case is to keep track of a user’s scroll position. The return value of this method is passed as a parameter to the last update method on this list.
• componentDidUpdate() takes prevProps, prevState, and snapshot as arguments and is typically used to see if another network request is needed after the update finishes. The setState() method can be used in this method, but must be wrapped in a conditional to avoid causing infinite loops. This method will not be invoked if shouldComponentUpdate() returns false.

The Unmount Method

There’s only one method in this phase, and it’s called componentWillUnmount(). This method is invoked immediately before a component is destroyed. Most common use cases are invalidating timers, canceling network requests, or removing subscriptions that were created in componentDidMount().

Conclusion

Lifecycle methods are a must-have library for React developers. Some are used more than others, but all of them are detrimental to making a truly responsive client application. I hope this post helped you decide if, how, and when to use these methods. Thanks for reading, and happy coding!