React 16 New Lifecycle Methods
React 16 has brought some major changes in the react library. It is the first version of react which is built on top of a new core architecture called “fiber”. The new react library is MIT licensed and smaller in size despite of having a lot of new additions.
Along with many changes like introducing fragments, portals, custom DOM attributes and an improved server side rendering , react v16 also introduces few new lifecycle methods to further optimize our code.
Deprecated Lifecycle Methods
React is introducing async rendering in its future releases. So they are deprecating few lifecycle methods which are blockers for introducing async rendering and also infuse bad coding practices sometimes. So React v16.X is deprecating componentWillMount, componentWillReceiveProps, and componentWillUpdate.
React follows semantic versioning , so all the changes will be gradual.
React v16.3 introduces a new alias UNSAFE_ for the deprecated methods. Though both the new aliases and old lifecycle names will work in this version.
Future React v16.X releases will through a deprecation warning message in console in DEV mode for old lifecycle names.
React v17 release will stop using old lifecycle names and only aliases will work from this release onwards.
New Lifecycle Methods
getSnapshotBeforeUpdate
This lifecycle method is called right before the DOM is updated. Return value from this method is passed as a third parameter to the componentDidUpdate method.
Together with the componentDidUpdate method this new lifecycles method takes care of all the use cases of the legacy componentWillUpdate Method.
The example above is implemented using getSnapshotBeforeUpdate, but the same can be done using componentWillUpdate as well. However, componentWillUpdate has its own limitations.
getSnapshotBeforeUpdate is used here to read the DOM property, doing the same with componentWillUpdate will yield the same result if we are not using async rendering. However, in async rendering there is a delay between “render” phase lifecycle ( render, componentWillUpdate ) and “commit” phase lifecycle ( componentDidUpdate ). During this delay if the user resizes the window or make any changes in the DOM property, then the output from componentWillUpdate will become stale. The solution for this problem was to create another “commit” phase lifecycle which is called just before the DOM is mutated. This is where getSnapshotBeforeUpdate comes into the picture.
getDerivedStateFromProps
This new lifecycle method is invoked just before render(). It returns an Object to update the state or null to update nothing.
This method is called both when the component is instantiated and when it is re-rendered, i.e. this method will be called when this.setState() has updated component’s local state, unlike the legacy componentWillRecieveProps method which is called only when the parent causes a re-render by passing in new props.
Together with the componentDidUpdate method this new lifecycles method takes care of all the use cases of the legacy componentWillRecieveProps Method.
If we declare both componentWillRecieveProps and getDerivedStateFromProps, only getDerivedStateFromProps will be called and we will see a warning in the console.
In the example above, the returned value behaves similarly to current setState value.We only need to return the part of state that changes, all other values will be preserved. Please note that we still need to declare the initial state of the component.
componentDidCatch
Prior to React v16.0, any error in any part of the application would crash the entire application. To solve this problem React v16.0 provided a new lifecycle method named componentDidCatch( error, info ). We can implement this lifecycle method in the parent class and wrap our children component within it. Consider the following example.
<MyApp/> is wrapped within ErrorBoundry component, which has implemented componentDidCatch method. Any error in MyApp or its children component will not break the application now, instead it will show an error message to the user saying “Something went wrong”.
React v.16.x has not changed much in commonly used lifecycle methods like render(), constructor(), componentDidMount() etc. However, few rarely used lifecycles like shouldComponentUpdate() may still change in the future. With focus on enabling async render and to improve performance, React future releases may change lot other things in the way we code using react.
Happy coding !