React 16 - What's New?

October 2017

So the latest version of React is upon us - React v16.0 - and the team at EDC4IT were, as always, keen to get their minds around the latest developments and figure out why users should be adopting the new tech. One of the stand-out reasons hit us immediately: Fiber.

What is “Fiber”?

If you’ve been reading around about the new React you’ll probably have come across Fiber. If so, you may be wondering what everyone’s talking about when they mention it.

Fiber is the new core architecture that React 16 is built upon. Since it is an entirely new architecture it means React has been rewritten from the ground up.

As updates are released we’ll see even more of the impact that the new architecture and features can achieve.

In the meanwhile there is a plethora of important improvements that our instructors are keen to share with those who are new to React, as well as those who already have a good grasp of previous React versions.

Here are the current improvements that the EDC4IT team found upon inspection of the new React v16.0:

Improved Server-Side Rendering

This is really exciting! The server renderer has been rewritten from the ground up for React 16. Better code means:

  • it is significantly faster
  • it includes support for streaming
  • no need to bundle React for high server-rendering results

“How much faster is “faster”?” we hear you ask. Well according to tests, using synthetic benchmarks, React 16’s server rendering is at approximately 3X faster than its predecessor, React 15.

Another factor that makes React 16 quicker is that it no longer needs the initial render to reflect an exact match from the server. The new version is happy to reuse the existing DOM where possible. Rendering different content on the client and server is not recommended, but in some instances it can be super-useful.

Improved Error Handling

Runtime errors in previous versions of React used to mean error messages necessitating the page being refreshed in order to continue. This has been addressed in React 16 with stronger error-handling capacity.

Here’s how it works: If an error is produced within a component’s render or lifecycle methods, the entire component tree is unmounted avoiding the display of corrupted data.

Yes, this can lead to some frustrated users. So, the EDC4IT experts suggest using error boundaries. These are components that instantly capture and contain errors within their subtree. Instead of displaying corrupted data or necessitating restarting the app an alternative UI is displayed. They’re like try-catch statements.

Custom DOM Attributes

That DOM will be seeing a whole lot more action as the improved React 16 will be passing any unrecognised HTML and SVG attributes through to it. This also means you’ll be able to press “delete” on the lion’s share of React’s attribute whitelist. This will result in smaller file sizes and a lot more efficiency.

Async Rendering

This is a new system that works by allowing the browser to complete the rendering by feeding it tasks periodically. This means that apps can be more responsive because the main thread is not being blocked.

React 16 avoids any such blockages.

Get in touch to ask us about our latest React and Reactjs courses. Remember that we can tailor a course to suit requirements specific to your business.