<The Northcoders Blog />

 

All Posts

React: componentWillMount to be deprecated!

Our React teaching team follow developments in the Facebooks UI-creating library very closely. We update our curriculum every 2 weeks, and recently they came across an update worth sharing with everyone!

This is a blog for anyone who builds User Interfaces with React! Some very important features are improving - but it's important everyone knows about these changes.

When creating a React application, we split our UI into independent, reusable components. All these components follow the same cycle, from creation and being mounted to the DOM to being unmounted and destroyed. This is referred to as the component lifecycle.


React provides us with lifecycle methods, which automatically get called called during the appropriate lifecycle stage. A significant change in React v16.3.0 is the deprecation of several methods. These are:


componentWillMount

componentWillRecieveProps

componentWillUpdate


The reason for this decision is twofold:

  1. All three methods are frequently use incorrectly and there are better alternatives.
  2. When asynchronous rendering is implemented in React, misuse of these will be problematic, and the interrupting behavior of error handling could result in memory leaks.

Starting with React v16.3.0, new versions of these methods categorised as unsafe have be created, and the legacy versions will come with deprecation warnings when is strict mode. From React v17 the legacy versions will be removed completely.  


The new unsafe versions will be:


UNSAFE_componentWillMount

UNSAFE_componentWillRecieveProps

UNSAFE_componentWillUpdate


React will be introducing a couple of new lifecycle methods to plug the gap. They are:


getDerivedStateFromProps

getSnapshotBeforeUpdate


How to live without...


componentWillReceiveProps


getDerivedStateFromProps is going to handle what componentWillReceiveProps and componentDidUpdate did.

After either a component is created or when it receives a prop, getDerivedStateFromProps is called to return a new state.


componentWillUpdate


getSnapshotBeforeUpdate handles what componentWillUpdate and componentDidUpdate would have done just before the DOM gets updated.

componentDidUpdate now receives whatever getSnapshotBeforeUpdate returns to it.


componentWillMount


Often you will need to asynchronously fetch data from other servers, and many people use componentWillMount to do this. But asynchronous data fetches won’t return before the component renders, and that means that the component will re-render more than once.

So, where shall we fetch the data instead? Easy. Use componentDidMount!

 

For more information about the future of React and other new features then check out Dan Abramov’s top notch talk as JSconf!


 

Josh Gray
Josh is a Talent Co-ordinator at Northcoders. After leaving a career in recruitment and graduating from Northcoders in 2017, he decided to stay to help spread the word about Northcoders, and ultimately provide the North with the talent it needs.

Related Posts

My First Venture Into Coding and Becoming a Northcoder

Vel is a student on Northcoders' coding bootcamp, The Developer Pathway! 
Vel 17 July 2018

Hazel's Blog: Getting Objects to Behave Like Arrays

Hazel is a Week 2 student on Northcoders' coding bootcamp, The Developer Pathway!
Hazel 05 July 2018

Why You Should Hire A Northcoders Apprentice

We've launched our software developer apprenticeship, and we'd love to partner with you on it! 
James Brooke 03 July 2018