So What’s New in React v16.6?
Introducing the new and shiny features in the React version released some days ago, and React Hooks.
React js, one of the most popular javascript libraries around, with over 110,000 ⭐️on github and a host of dedicated community members making life easier for developers building amazing user interface has released the newest version 16.6.0 (React now has over 100 releases).
Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent or shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components. — React Blog
Now let us look into these new features.
React v16.6 components can also be shared in a Bit collection so that they can be easily reused and synced in multiple projects instead of rewritten. Try it.
1. React.memo()
If you are familiar with React, you know that component re-rendering can occur if a component props is changed. So imagine if you want to choose a select number of components to go through a component re-render instead of all the react components in a tree, we can already do that with React.PureComponent() which we can all agree is a great performance boost. React.memo() works exactly like React.PureComponent() but for function components instead of classes, so when the props of a function component are the same it skips.
This is a simple props compare, you can go further to pass a comparison function like thus:
2. React.lazy()
This is my favorite feature; Lazy Loading, which is the technique of loading only-needed or critical user interface items on load then quietly unrolling the non-critical items when they are needed is now fully integrated into core react library itself. Normally we used webpack or react-loadable to achieve this but now we have React.lazy() in react core yay!
It does not even end here, so there’s a shiny option to join react.lazy() with suspense and then specify a kind of fallback component that would first show while the dynamic component loads up. (remember cache-first policy in Progressive Web Apps, yeah something like that)
3. Static contextType
So there’s a long back-and-forth story about the context API. It was introduced in React 16.3 and then discouraged later because there was an issue with the adoption of render prop API, this is a solution to help us consume value from a class component.
React 16.6 comes with contextType in a component which makes it convenient to consume a context value from within a class component without having to pass down render props. A Context object created by React.createContext() can be assigned to the contextType property.
4. static getDerivedStateFromError()
React 16 introduced Error Boundaries to solve the problem of a javascript error in a particular component breaking the whole app. Error boundaries, according to the react docs basically catches javascript errors anywhere in their child component tree, log the errors and display a kind of fallback user interface instead of the crashed component.
If you are familiar with error handling in React, you would remember the componentDidCatch lifecycle method. This lifecycle method gets called only after an error has occurred; this in turn helps in server side error logging. Another thing componentDidCatch lifecycle method helps to do is to display a different user interface to the user by calling setState.
The little problem is that when before setState is called, react renders null in place of the particular tree that threw the error. It has been observed that sometimes, this breaks parents components whose refs should not be empty. Secondly, it does not work to recover from server side errors since the Did lifecycle methods do not get triggered during the server side rendering.
Now another error method has been added that displays the fallback user interface before the render completes.
Deprecations
The following APIs have been deprecated in STRICT MODE from React 16.6
- ReactDOM.findDOMNode(): This API was deprecated in this version because it is really slow when tested in React 16.6; also it is often times misunderstood and most of the features are not necessary.
- Legacy Context: using contextTypes and getChildContext — Legacy context makes React slightly slower and bigger than it needs to be. The team at react strongly encourages upgrading to the new context API. Hopefully the addition of the contextType API makes this a bit easier.
There is absolutely no need to panic if you do not use strict mode. Strict mode was introduced in React version 13.
🌋 Some Future-use Warnings
- Suspense is not yet available for server side rendering, support for suspense would ship with a later release.
- As of this writing, getDerivedStateFromError() is not yet available for server side rendering. it is however designed to do so in a future release; this release is to make us get acquainted with it first.
Installation
- NPM
npm install --save react@^16.6.0 react-dom@^16.6.0
- YARN
yarn add react@^16.6.0 react-dom@^16.6.0
- UMD Builds via CDN
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Here is a link to the official documentation.
Here is a link to the changelog also.
React Hooks
The team at React also released a viral-news-worthy new version 16.7, currently in Alpha and incase you have not heard about it, here’s an article to introduce you to React Hooks by Mahesh Haldar
Hooks can also be used as Bit components.
Early Developer Reactions to React 16.6
So there is a few observations and early reactions from developers to the new version with some conversations over things like:
- The new Suspense encourages global state and removes the possibility to safely store costly state like REST resources anywhere in the tree causing cache invalidation.
- How complex the core react API has become over time.
Well, the dedicated react team are in all honesty adding more than they remove from react at every new version. They have come out to say that this is a very intentional move because they care so much about Backward Compatibility. That being said, the team at React is not hoarding features and it is very important to remember that React has barely changed in the last 5 years. In the end, we cannot deny that the team at react care more about helping developers create apps with the barest minimum constraint than they care about their API being pristinely clean and that is one of the major reasons why we ❤️react.
Conclusion
Let’s end with a cool Trivia by Dan Abramov on twitter.
Assuming your app is client-side
- Update React and React DOM to 16.6
- Add
<suspense fallback={<div> loading</div>}>to any route or page - Use lazy() for any component inside.
You will see how you can turn any component import below suspense to be lazy, cool stuff!
What is your favorite new feature/API? Share in the comments 👍
