What’s happening new In the world of React

The Important Issue-

React 18 Is the version which comes with a gradual adoption strategy. That means if you are learning version 17 it’s still fine.So we don’t need to worry about the old code not going to work. (Don’t panic keep learning)
Concurrency – Version 18 is revolving a lot around concurrency (we will see more about this in the explanation section).

New Version React 18 : The Plan

React 18 will be the next major version
They published react 18 alpha so we can try it.
We can upgrade to react 18 with minimum and no changes to code(very important

Major new upgrade Transition

To understand the concepts let’s take an example of google search user type some keyword in search bar and google will give us some results in search box based on priority.

Suppose here we have two component’s both are managed by states.

1.setInput(input) – To enter data.

2.setSerachresult(searchResult) – To get a search result.

Now the question is which one should get more priority?It is clear that setInput() should get more priority so users can get immediate results.What users type should be immediate there,the search result can come in after some time.

Batching

Lets understand what control they are giving in this concepts:- Definition: Grouping all events and then firing a dispatch to re-render DOM.

Take a example :Suppose we have three button with different colors like green, orange, pinkYes i know we can manage three buttons by setting the state to change colour in function but lets understand this first.

Code as we can write-

Here in the function, changeColorToWhite DOM re-render will not pushed 1st state change or 2nd change state. It will be fired at the end of all state changes. This process is known as batching and this improves performance a lot in react.

But this batching is not consistent. It breaks its consistency when data is fetched from online requests.

When we get data from the api as soon as the state changed.

In react 18 version .this is being addressed and now we get more consistency in batching the DOM re-rendering .Not only that we can control the re-rendering with methods available to us

Here we get just 1 re-render of DOM for all the state changed.

Suspense

Suspense update is all about improving server-side rerendering Without suspense we are facing one big issue that while server-side rendering is that not all of the data is sent at once to the user first HTML is sent ,then CSS and in the meantime, JS is still getting processed in the server.This is also known as hydrating time.Buttons are great but until event handlers are attached to them, they are just visual elements

Solution for this is suspense in react 18.Instead of sending HTML and CSS of those elements that are very dependent on JS,we can send an alternate component for some time.As soon as the component is ready to be sent, it will automatically change by the main component.

How to install

We can install React 18 right away using: npm install react@alpha.

And ReactDOM, npm install react-dom@alpha

Release timeline

Note:don’t have a specific release date scheduled,but we expect it will take several month(Release data from official blogs)

Library Alpha : Available today
Public Beta : at least several months
Release Candidate (RC) : At least several weeks after Beta
General Availability : At least several weeks after RC release

Wrapping Up

With this I would say all the updates that you should have about react 18 is with you There are many other minor features that are coming up but I just covered major ones

React 18 is an alpha release right now and not suitable for production so APIs might evolve until it reaches a stable release by the end of this year .

What’s happening new In the world of React