Frontend
Nov 03, 2020

A brief overview of the React 17

First things first, yes there are no new features in this update! There are several upgrades and a few eliminations which we believe are worth discussing. 

So here’s our take on the all-new React 17.

This new version comes after a long wait of nearly two years. We believe that there are a lot of improvements vis-a-vis the previous version. The focus is largely on the gradual updates to this version and the future ones.

So, let’s see what all they are!

Changes in event delegation 

The React 17 update eases the nesting of applications that are built using different React versions. A lot of conflicts were seen when many versions of React are being used together. With this update, event handlers will not be attached at document levels. In its place, it will go to the root DOM container where your React tree is rendered. 

Image source: Reactjs.org

Also, with React 17 going in for gradual changes, developers will have more freedom when it comes to migration of apps in one go or smaller chunks. 

Native component stacks 

Finding errors with javascript function; its name and location stack trace can lead to a needle in a haystack hunt while sifting through hundreds of coding lines (if not a thousand). 

To pinpoint errors in React 17, there is an unorthodox approach taken by the React team. Here is what they are thinking, in their own words:

Currently, the browsers don’t provide a way to get a function’s stack frame (source file and location). So when React catches an error, it will now reconstruct its component stack by throwing (and catching) a temporary error from inside each of the components above, when it is possible.

This improvement will come in handy during the production environment. 

No More Private Exports 

The new update of React has withdrawn private exports. This was a much-awaited update for React Native for Web. The dependency of React Native for Web was on certain internals of the event system. This dependency was fragile and now will be addressed with this update.

No Event Pooling 

Event pooling optimizations are no longer a part of React 17. It failed abysmally to enhance the performance in older browsers. Its initial purpose was to reuse the event objects between events along with setting all fields to ‘null’ between processes. However, it ended up causing more confusion for developers. Following this change, the need to use e.persist() is also eliminated.

Properties of React Components 

React 17 is now compliant with ES6. There are talks of using key or codes and in case you are working with it, you are required to code property to keyboard event objects. On similar lines, capture phase events use real browser capture, there are no bubbles in onScroll events, etc.    

In addition to the above-mentioned updates, two new functions are being introduced in this update, namely ‘getDerivedStateFromProps’ and ‘getSnapshotBeforeUpdate’. 

All this said, React 17 is surely working towards making React more prominent within the developer community and making it easier for all to understand, deploy, and migrate to React in the future. Feel free to get in touch with us here if you need help with your React development.

About us 

We, at Galaxy Weblinks, are all for new ideas and experiments. We believe that being up-to-date in this fast-paced world gives us adequate time to explore and implement new changes. Our developers are constantly striving for improvement and a better user experience. Contact us for a free consultation!

By Admin

About Galaxy Weblinks

We specialize in human-centric user experience design services to our clients across the globe. Our innovative ideas, creative designs, industry best practices, and processes help us improve user satisfaction and solve complex design problems. Contact us for a free consultation!