Top 7 React JS V16 Released Features

React 16 (React Fiber) is the latest react core algorithm for better UI performance. It is the latest version of the most popular JavaScript UI library, which allows an immediate upgrade for React projects. React JS and its frameworks make web and mobile application development faster. Facebook announces the exciting release of React JS V16.0 with long-standing features such as:

• Fragments & Strings
• Error Handling
• Portals
• Server Side Rendering
• Custom DOM Attributes
• New Core Architecture
• Reduced File Size

Facebook has rewritten the React core completely. The project React Fiber is highly compatible & responsive to React-based applications. Below you can find 7 New improvements in React JS V16 UI Library.

1. Fragments & Strings: New Render Method

React V16 allows the component to use a render method that returns a string, a number & an array of elements. React Fiber support this feature in server-side rendering also. In React 15, the render method is used to return the single React element.

render() {
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Always remember to add keys to the elements in the fragment to avoid the key warning. In the upcoming update, the new fragment will be added to the JSX that doesn’t require any keys.

For more details, See the full list of supported return types

2. Error Handling

JavaScript error is part of the application code inside the components. These errors are used to corrupt the React internal state & cause emits cryptic errors. To resolve this issue, React V16 introduces a new concept of error boundary for React users, which includes try-catch statements. Error boundaries are the important components in React that catch JS errors inside their subtree, component & logs while rendering in life cycle method & constructors. These errors will be displayed on the fallback UI.

In React 15, runtime errors could put React in a broken state which has become very typical for React developers. Now in React V 16, if any error arises on the component’s render or in the lifecycle method, then the whole component tree will be unmounted from the root. It helps to prevent the display of corrupted data.

A component class becomes an error boundary by defining a new lifecycle as componentDidCatch(error, info)

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  } 

componentDidCatch(error, info) {
  // Display fallback UI    
this.setState({ hasError: true });   
 // You can also log the error to an error reporting service    
logErrorToMyService(error, info);  
}   

render() {    
if (this.state.hasError) {     
 // You can render any custom fallback UI
return <h1>Something went wrong.</h1>;    
  }
return this.props.children;  
 }
}

componentDidCatch(error, info) method works similar like a JS catch{} only for components. Always remember that error boundaries catch errors in the components below them in the tree, not within itself.

For more details, check out error handling in React 16.

3. Portals

React V16 introduces a new concept of portals which allow us to render children into the DOM node that exists in the parent component outside the DOM.

ReactDOM.createPortal(child, container)

As mentioned above, the first argument, “child”, is a rendered react child, which can be an element, fragment or string. The second argument is a container which is a DOM element. The component render method returns an element which is mounted into the DOM as a child of the nearest parent node.

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

Inserting the child into different location in the DOM

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

Always remember to follow the proper accessibility guidelines while working with portals.

For more details, check out documentation for portals.

4. Server Side Rendering

React V16 supports streaming which is a complete server renderer. It works very fast, which helps you to send bytes to the client faster. React 16 server rendering is three times faster than React 15. It serves better hydrating server-rendered HTML to the clients. Hence, it doesn’t require an initial render to match the results with the server.

There are two different methods for rendering :

• render(): when you are rendering the content on the client side.
• hydrate(): when you are rendering on top of SSR markup.

Some important features of Server Side Rendering in React V 16:

• It is backward compatible.
• It allows the client-side renderer & its components to return string, fragment & array of elements.
• React V16 generates a more efficient HTML document size.
• React 16 allows non-standard DOM attributes. It means both the clients & server renderer can pass through non-standard attribute adding to HTML elements.
• It supports stream rendering. To use render to stream in React V16, call one of two new methods in the React DOM/ server: renderToNodeStream or renderToStaticNodeStream.

5. Custom DOM Attributes

React supports the custom DOM attributes. It will now pass the attributes through the DOM, which allows React user to get rid of the attribute whitelist. It will result in reduced file sizes. Earlier, React used to ignore unknown DOM attributes. Now, the unknown attributes will end up in the DOM.

// Your code:
<div mycustomattribute="important" />
 // React 15 output:
<div />
 // React 16 output:
<div mycustomattribute="important" />

6. New Core Algorithm Architecture

React V16 is defined by the codename “Fiber”, which is the first version of React JS. It is built on top of the new core architecture. Facebook is working on the most exciting area of async rendering. It is a strategy to schedule the rendering work periodically. React avoids main thread blocking that allows Async rendering to make them more responsive apps.

React V16’s new implementation supports asynchronous rendering. It allows large components to get processed without blocking the main thread. The public API remains unchanged. The rendering work can be split into smaller frames & spread out into multiple ones. The rendering engine is single-threaded for the browser that works synchronously. React 16 manages the main execution thread & rendering using the native browser API by checking the pending task. Example: Main Thread of the Firefox.

while (!mExiting) {
NS_ProcessNextEvent(thread);
}

7. Reduced File Size

The React 16 size differences are smaller than the React 15 versions. Rollup helps React to create flat bundles for different targeted formats that result in better performance in terms of size & runtime.

• React is 5.3 kb decreases from 20.7 kb
• React DOM is 103.7 kb, down from 141 kb
• React + React-DOM is 109 kb reduced from 161.7 kb

React JS V16 Installation

React V16.0 is available on npm. To install React 16 with Yarn, run the command.

yarn add react@^16.0.0 react-dom@^16.0.0

 To install React 16 with npm, run the command.

npm install –save react@^16.0.0 react-dom@^16.0.0

Final Thoughts on React JS V16

These are some major changes in React 16. You can create your applications with React app that will automatically install react & react-dom version 16 and make your front end development more attractive and catchy. React has been adopted for 40% of the current projects in JavaScript & 30% developers are comfortable to use it.