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 private Exports

This is more specific for React Native for Web. The older versions will no longer be compatible with React 17. It was due as well since React Native for Web is required to align with the internal changes following this update.

No event pooling

Event pooling optimizations are no longer a part of React 17. It was supposed to improve performance in older browsers but that didn’t happen. Additionally, for developers, this means lesser confusion, and the need to use e.persist() is now 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!

Originally published at https://blog.galaxyweblinks.com on November 3, 2020.




Technology Insights, Design Trends and Industry Updates. https://www.galaxyweblinks.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Save Data To Offline Storage With Localforage

React Native — Resource linking fails on lStar — Solved

RxSwift basics: Observe, Validate & React to changes in data.

Why we choose React, Gatsby and Headless CMS’s for building new websites

How we achieved 98/100 google speed in Allergify website

Callbacks in JavaScript

Execution Context in Javascript

Introduction to Deno

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Galaxy Weblinks

Galaxy Weblinks

Technology Insights, Design Trends and Industry Updates. https://www.galaxyweblinks.com

More from Medium

5 Articles every WebDev should read this week (#51)

Use breackpoints as css classes in emotion react

Creating React “Widgets” that can be embedded on any website, by anyone

How To Create A Carousel In React