React.memo()

As I mentioned before, the new version of React provides us with memo function, which looks like this:

React.memo(function Title(props) {
   return <h1>{props.title}<h1>
})

This method allows us to block re-rendering of our functional component. We cannot access the Lifecycle of this kind of component. Until now, we could achieve this only with Class components using “PureComponent” or a Lifecycle method – “shouldComponentUpdate”.

The first parameter used in React.memo() is the name of our functional component. In the next parameter, we can transfer a function which would compare a prevProps to the nextProps.

function areEqual(prevProps, nextProps) {
 if (prevProps.title !== nextProps.title){
   return true;
 }
 return false;
}

Thanks to this function we can check if prevProps differs from the nextProps, which is useful when we pass more advanced objects because the way in which memo would compare them is simple.

Lazy loading!

The process of loading all the components at once causes a decrease in the efficiency of our app. Before the update, we dealt with this process using libraries like Loadable, which made lazy loading available.

It is possible thanks to dynamic imports and builders like Webpack. Here’s the syntax of a dynamic import:

import('./component.js').then(component => <component />)

This import returns a promise which allows us to access the component through then().

React.lazy()

const Title = React.lazy(() => import('./Title'))

const PageComponent = (props) => (
 <div>
  <Title>This is my homepage</Title>
 </div>

)

It is made to dynamically render the imports as the components. So a component imported this way is loaded right when it is rendered in a component in which it is included in. Moreover, a dynamically imported component can be disconnected from the main file and placed in a separate one.

It decreases the size of the main file and impacts the loading speed, as well as processing speed by a browser.

Suspense

React 16.6 now allows us to dynamically load components. The problem occurs when we want to show the user that something is going on in our page. Suspense was built in order to meet this demand. It looks like following:

const Title = React.lazy(() => import('./Title'))

const PageComponent = (props) => (
<div>
  <Suspense fallback={<div>Loading...</div>}>
    <Title>This is my homepage</Title>
  </Suspense>
</div>
)

We wrap lazy-loaded component with Suspense. It takes fallback as a property. It is worth to notice that any proper react element can be used. Fallback would be shown by the suspense while components are being loaded. This way we provide the user of our app with information about loading app’s resources.

In this iteration, there are more tweaks which may be less impressive, but they also provide developers with tools to make working with the framework easier.

contextType

The React team addednew API for context in the 16.3 version. Thanks to it, we can transfer props to components and skip transferring them through sub-components as it was needed before.

Context API resolves the problem of props drilling – transferring props through a bunch of components. To make our work with context API we can use contextType. We assign context to the contextType, here’s a short example:

Import {AuthContext} from './auth.js'

class Main extends React.Component {
 static contextType = MyContext

 render() {
  return <div>{this.context.isLoggedIn}</div>
 }
}

Thanks to the ability to assign context like this, we can access its data using this.context. contextType simplifies the way we work with context, because there’s no need to add context consumer to our render method, anymore. However, what if we would like to use more contexts than one? We would need to include a new context in our render function.

Static getDerivedStateFromError

In earlier versions of React the possibility to detect errors in overriding components was released. We can do it thanks to ErrorBoundries and Lifecycle method of the component (componentDidCatch). This way we are able to detect an error and handle it.

In the new version of React, we get static method getDerivedStateFromError. This method would run when an error would occur. Moreover, it would take it as a parameter and return the object to update its status.

class ErrorBoundary extends React.Component {
 state = { hasError: false };

 static getDerivedStateFromError(error) {.
   return { hasError: true };
 }

 render() {
   if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
   }

   return this.props.children; 
 }
}

getDerivedStateFromError is a supplement to the componentDidCatch method. Both of them can work together, but only the componentDidCatch can use this and execute more operations than changing the status of the component.

React 16.7

In this release there are some fixes for React.lazy. However, it doesn’t include Hooks yet. React team said that hooks are in the process of QA and will be released in upcoming months.

Changes released in 16.6 and 16.7 of React help us to work more efficiently with React which impacts the speed of the app as well as the time required for development.