Problematic React Lifecycle Methods are Going Away in React 17

Have you had trouble understanding some of the react lifecycle methods and how to implement them without messing up?

If your answer is yes, you are not alone.

I have been using them with React Native apps, and I must admit that I have misused them multiple times and learned lessons the hard way.

The React team has decided to deprecate some of the lifecycle methods with React 17. A recent blog post from the reactjs team reveals the future of component lifecycle methods.

Why did they decide to get rid of them? The original lifecycle model was not intended for some of the upcoming features like async rendering. With the introduction of async rendering, some of these lifecycle methods will be unsafe if used.

Legacy lifecycle methods have too many potential pitfalls to be safely used for async rendering.

So what is going away?

The lifecycle methods below will soon be deprecated.

componentWillMount

componentWillRecieveProps

componentWillUpdate

They are going to deprecate these methods in phases, so it won’t be an overnight change. I am sure many of us are using all three of them frequently.

The above lifecycle methods are categorized as unsafe in the 16.3 release. Deprecation warnings will be added to the legacy methods in the release after that. Finally, the legacy methods will be deprecated completely in React 17.

Interestingly, the unsafe methods will still be in use in React 17.

What is new?

The three old lifecycle methods are going to be renamed and two additional methods will be introduced as well.

UNSAFE_componentWillMount

UNSAFE_componentWillRecieveProps

UNSAFE_componentWillUpdate

getDerivedStateFromProps

getSnapshotBeforeUpdate

So the methods are not really gone, but they are marked unsafe. Programmers should be aware not to use them at all or sparingly use them with caution.

Async rendering will cause componentWillMount to trigger multiple rendering of your component tree. This makes it unsafe.

If you are wondering how server rendering will work in the future with just componentDidMount, here is a response from Dan Abramov explaining it.

Safe Lifecycle Methods

Here is what I gathered about the new lifecycle methods from the blog post.

getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {    // ...  }

This method is going to handle what componentWillRecieveProps was able to do along with componentDidUpdate. It is static. It is called after a component is created and also called when it receives a new prop. This will be the safer alternative to componentWillRecieveProps.

It returns an object to update state in response to prop changes. It would return null to indicate no change to state.

React may call this method even if the props have not changed.

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {    // ...  }

This is going to handle what componentWillUpdate was able to do along with componentDidUpdate. This is called right before the DOM is updated. The value that is returned from getSnapshotBeforeUpdate is passed on to componentDidUpdate.

componentDidUpdate is called as soon as the DOM is updated. The snapshot value is passed on to componentDidUpdate.

Resizing the window during an async rendering is a good use-case of when the getSnapshotBeforeUpdate can be utilized.

Edit: As I was writing this post React 16.3.0 was released officially. Wohoo!!!

In addition to the lifecycle method changes, they have released a new tool called Strict Mode. It identifies and highlights unsafe lifecycle methods in components, and many other side-effects during development. Learn more about Strict Mode from their blog post.

For examples of the new lifecycle methods and their usage checkout the original blog post.

To get a better understanding, checkout this video of the React team showcasing a preview of some of these cool new features.

What do I think?

When react component lifecycle methods were originally designed they did not have to worry about many of the futuristic use-cases like async rendering.

Although these deprecations are not backward compatible, it is a step towards improvement and I like it.

I am glad the react team has called out the legacy lifecycle methods as unsafe. This will prohibit anti-patterns and misuse of these methods. I am very excited to checkout React 16.3.0 to see all the new features that are in store for us developers.

Let’s go have some fun.

I am Adhithi Ravichandran a Software Consultant working on React Native Apps. I am also a Pluralsight Author and love teaching. You can checkout my latest course on React Native from pluralsight below:

https://www.pluralsight.com/courses/react-native-big-picture

For more information and posts from me visit http://adhithiravichandran.com/ and follow me on twitter @AdhithiRavi.