React 16 was announced on 26 September 2017 by Facebook, who is working on this new version of React, called React 16. This is a major release for the React Community and the latest version, named “Fiber” offers new changes, features, deprecation, and so much more. “Fiber” is built on a new architecture and includes changes in error boundaries, fragments, portals, async rendering, for components, animations, DOM updates that makes rendering faster, etc.
If you want to use the new React, then you need to know about the new features and architecture. in this blog, we will start learning the highlights of React16 (Fiber) that you need to know before you upgrade.
1. Error Boundaries
As a regular component, you can easily use this Error Boundary method now:
Portals are a very cool feature which allows users to target and render components. The portals provide a clean mechanism in the front-end development, where there is a situation that we want to control or effect – an element which is not in our main application DOM hierachy such as chat widgets, modals dialogues, overlays, etc. Portals in React 16 is the new concept and its gives permission to render children in any of the DOM mode. Portals give a great way to render children into a DOM node that will exist outside of the parent component hierarchy DOM. Please check the example given below:
In React 16, there is a common pattern if you want to return multiple elements. Fragments will help you group a list of children without adding extra nodes for the DOM. Now, we can easily return an array of elements with this new feature.
Please check the example are given below in HTML:
React 16 decided to change things up by offering support for returning an array of elements from a component’s render method. Instead of having to wrapping the children elements in a DOM element, you can now add them directly into an array.
However, this was a bit confusing when compared to normal JSX such as requiring extra commas for separation, a key to avoid React’s key warning and also needing quotation marks for adding strings. To provide a more consistent approach to this issue, React now offers an upgraded Fragment component, which can be used in place of arrays.
You can easily use this component without having to make any changes and even without requiring quotes, keys, and commas.
4. Asynchronous Rendering
Another amazing update in the latest React is the new reconciliation algorithm, that aims to improve performance and responsiveness. The Reconciliation (also known as the Virtual DOM), refers to the process of React finding the differences between the previous state and the next state of your application and making the necessary changes before re-rendering the DOM.
In the older versions of React, the main thread would be blocked while the updates were being made, resulting in some apps to feel laggy. Originally React used the ‘stack reconciliation’ approach, which was a synchronous process that required all updates to be completed entirely before it could return to the main thread.
In the new approach, referred to as Fiber Reconciliation, updates are allowed to be rendered asynchronously by creating small chunks that can be paused to check if the main thread has any new changes that need to be performed before it goes back to synchronization.
5. Browser Compatibility
React 16 works on the map and set collection types; however, these types are not supported natively in the older browsers or devices. So, if you have an app that requires support for older environments, then use can use a polyfill, such as core-js or babel-polyfill, to maintain compatibility.
This is what a polyfilled environment for React 16 using core-js will look like:
React 16 offers concurrency, which allows React to prioritize updates by importance. Inside the coding, each update is assigned a priority level thatdetermines the order in which it is processed. This ensures that high priority updates are given more importance, while low ones can be paused or halted. This create a more fluid UI that does not lag.
Facebook has ensured that the latest version of React creates a more fluid UI experience for not only the users but also the developers. These are just a few of the many features you can get your hands on when you upgrade to the latest version.