Server Side Rendering in React v16.0

React 16 improves the speed of server side rendering. React 16 provides a new hydrate() method to render components which are processed in the server side.

Server side rendering is performed with Node web servers express, using the renderToString() method which compiles the react component in the server side and send the HTML to the client.  

Portals in React v16

Portals allows us to have better control of the Application UI, without portals when we return an element from a component's render method it is mounted in the DOM as a child element of the parent component.

Error boundaries in React v16

React v16.0 provides better error handling, prior to react v16.0 if a component throws an exception then the entire application will crash and the only way to recover is to refresh the page.

To overcome this React v16.0 introduces error boundaries. Error boundaries are special components which catch errors in its child component hierarchy and display a custom error / fallback UI. Error boundaries handle any errors in the render(), constructor or any of the component life cycle methods in its child component hierarchy.

Fragments in React v16

Fragments is a new feature in React v16.0 which allows us to return multiple child elements/components/strings from a component without using a wrapper like <div> or <span>. Prior to react v16.0 this was not possible. Make sure that you include the "Key" attribute while returning multiple elements.

Below examples show how Fragments can be used in React 16.

What's new in React 16.0

React v16.0 comes with major changes in the underlying architecture, with limited changes to the pubic API so the way we write react code doesn't change much, but the internals have changed drastically.

Some of the key new features introduces in React 16 are fragments, error boundaries, portals, improvements to server side rendering and reduced library file size.