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

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.nextstate = { 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.

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()

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store