Reacting to this for the 18th time: React18
React 18 and its new features are taking us up by a storm
The Plan
The React team is excited to share that they have begun to work on the React 18 release, the next major version.
- A Working Group created to prepare the community for new features in React 18.
- They have published a React 18 Alpha so that library authors can try it and provide feedback.
Anyone working , learning, teaching, or using React to build user-facing applications, has nothing to worry about. These updates are primarily aimed at maintainers of third-party libraries. They are mainly focusing on trying out this new group and seeing its effect on the transition. New options will be offered and available thanks to the new features.
What’s coming
When it’s released, React 18 will include out-of-the-box improvements. New API’s, a streaming server renderer and automatic branching.
These features are possible thanks to a new opt-in mechanism they are adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This is just mind blowing to me and is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.
New API’s
There are three specific new API’s that React 18 is highlighting
startTransition — Its purpose is to spot state updates as transitions, making handling them non-urgent.
useDeferredValue — This is a hook that will give you a deferred element of the passed value, following the original one, up to provided timeout.
SuspenseList — Meant to handle cases where, fetched data can arrive in a dubious order.
Automatic Batching
If you aren't sure what exactly batching means , batching refers to grouping multiple state updates. The changes due to automatic branching are huge.React already groups multiple state updates into one minimizing unnecessary re-renders. In React 17 instead of updating a batch it will perform two independent updates.However, elements like Promises, timeouts, or other handlers didn’t take advantage; the reason being that it was strictly limited to the DOM handlers.
This completely alters due to the new update which will group state updates without limits, as long as it’s safe to do. The result would lead to creating better performance without any additional involvement.
Concurrent Rendering
Previously known as ‘concurrent mode’. Concurrent mode would fix the fundamental limitation by making rendering interruptible. Meaning is a user pressed another key, React wouldn't need to block the browser from updating the input. Instead it would allow the browser to paint an update to the input and then continue rendering the updated list. The change actually has a bigger meaning than meets the eye. It signifies the enabling of gradual adoption of concurrent features. Allowing us to adopt concurrent features without rewriting code and at our own pace.
Strict Mode
Strict Mode a tool meant to highlight potential problems within our code has a few additions. One to not would be a new behaviour called “strict effects”. Strict effects allows us to double-invoke effects like mount and unmount. It’s no longer only looking for resilient components but creating an environment to correct behaviour with Fast Refresh during development.
Another note worthy addition would be the ‘offscreen API’ which is currently being built. An offscreen API will enable better performance by hiding components instead of unmounting them, keeping the state, while calling the mount/unmount effects.
Root API
This one was mind boggling to me especially considering how many times i had misspelled or forgotten the render function when i first began. createRoot will replace the render function.The new API is the gateway to accessing new React 18 features. You can use the legacy API of reactdom.render but you will see a warning that it has been depreciated as well as a suggestion to switch to the new root API. Change is scary especially when you believe it can “bReAk” your application however, it’s meant to encourage gradual adoption and ease-out potential performance comparisons.
I hope you’re excited for the upcoming updates, the benefits and efficiency they can bring to React developers!
