React 18

Vincent Collis
2 min readJun 20, 2021

The update we've all been waiting for??

I’ve said it once and I will say it again. React JS is Developer God’s gift to Javascript developers. This is not an overstatement or embellishment of meaning. Javascript is the essence of a web application. It breathes life into the web and allows the creation of interactive environments and elements that increase the web’s overall user experience.

React does this by being a declarative, efficient, and flexible JavaScript library that allows developers to compose complex UIs from small and isolated pieces of code called “components.”

In a recent blog post, the React team announced the plan for the next version of React, alongside many of its upcoming features. There was also a release timeline, publicly available alpha, and even a Working Group dedicated to discussing and improving React 18. So lets dive in on those changes!

Strict Mode Changes

The team made some changes to strict mode by including new behavior called “strict effects”. This double-invokes effects — specifically mount and unmount ones.

The additional checks are here to test against multiple mount/unmount cycles. It ensures not only more resilient components but also correct behavior with Fast Refresh during development (when components are mounted/unmounted to be updated) and a new “Offscreen API”, which’s currently in the works.

Automatic Batching

React currently batches (aka grouped) multiple state updates into one to reduce unnecessary re-renders. However, it happens only in DOM event handlers, so Promises, timeouts, or other handlers didn’t take advantage of that.

With v18, React will batch state updates no matter where they happen, as long as it’s safe to do so. This results in better performance without any additional involvement.

Concurrent Rendering

This is 100%, the biggest update for React 18.

“Concurrent mode” is changing to “concurrent rendering”. The naming change is important, as it signifies the enabling of gradual adoption of concurrent features.

This is meant to allow you to adopt concurrent features without rewrites, seamlessly, and at your own pace.

--

--