ReactJS Important Updates To Use

React team has pushed some important updates recently which should be implemented across all projects. Lets look at those updates those updates in detail and how to use them.

Depreciated functions

As of React 16

componentWillMount

componentWillRecieveProps

componentWillUpdate

will be depriciated.

What this means?

As of react 16+, if you are using these lifecycle methods you will start getting warning when using these function.

As of react 16.3+, react team will introduce alias for these function with names UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate

As of react 17, these functions will be removed fully and only UNSAFE methods will be left.

Why these are removed

As per react team, these functions were not being used correctly as per there intended purpose. Especially with async rending these functions were not performant. As quoted by the react team

These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering. Because of this, we will be adding an “UNSAFE_” prefix to these lifecycles in an upcoming release. (Here, “unsafe” refers not to security but instead conveys that code using these lifecycles will be more likely to have bugs in future versions of React, especially once async rendering is enabled.)

New Features

getDerivedStateFromProps()

this function is supposed to replace componentWillReceiveProps and componentDidUpdate

class Example extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // ...
  }
}

this is a static method, which is called after a component is instantiated and also when component gets new props.

in this function you can return an object or null. the object which is returned will update the current state of the component

as a code example

How getDerivedStateFromProps works

static getDerivedStateFromProps(nextProps, prevState){
     if(nextProps.someValue!==prevState.someValue){
          return { 
                   someState: nextProps.someValue
                 };
     }
     else 
        return null;
}

How componentWillReceiveProps works

componentWillReceiveProps(nextProps){
       if(nextProps.someValue!==this.props.someValue){
         //Perform some operation
         this.setState({someState: someValue });
      }
    }

getSnapshotBeforeUpdate()

This is another new function. This is called right before any dom updates are made.  The return value of this function is passed a value to componentDidUpdate

class Example extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

this function is not used that often, but can be useful for dom operation before/after dom updates.

 

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.

 

Code Splitting

This is a very new feature introduced by react.

This allows us to split code and lazy load our javascript files. Basically when a project gets very big, the deployed bundled js size will become quite large and this results in initial slow loading.

With code spilling we are able to lazy load javascript files and hence inital page loading is very fast.

This is a very detailed topic and requires a seperate blog post. Here is more reading material on this

 

https://reactjs.org/docs/code-splitting.html

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49