An introduction to the latest launch from React along with an exploration of some interesting features

React’s latest version was recently released, featuring a number of out-of-the-box changes as well as a new concurrent rendering opt-in method. The new version emphasises a progressive adoption strategy, which means you may upgrade to React 18 with no or minor code modifications. That’s quite a feat. Isn’t that so?

But, before we get into the new features, there’s something you should be aware of: the React 18 Working Group (WG). The purpose of this group, which was introduced for the first time in React development, is to prepare the ecosystem for the gradual and smooth adoption of the future version by leveraging existing applications and frameworks.The most remarkable aspect of this new version is that it makes us feel like we’re a part of the research process for future new features. As you may have noticed, React 18 has a lot to offer, so let’s jump right in and have some fun.

Automatic Batching

Batching is a method of avoiding unwanted re-renders by combining numerous state updates into a single re-render. Prior to React 18, React used to batch states, which could only happen in DOM event handlers, causing other state modifications to be missed, such as promises and setTimeouts, among other handlers.However, in version 18, automated batching will batch all state updates, whether they occur within the promises widget or in setTimeouts, if it is safe to do so, resulting in increased speed. Take a look at the following code as an example:

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      {/* they run *after* the event in a callback, not *during* it */}
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }
  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}


If you don’t want to batch, you can opt out of batching by using ReactDOM.flushSync().

Concurrent Rendering

Concurrent rendering is, without a doubt, React 18’s most significant improvement. This means you may adjust the concurrent features at your own speed with minimum or no code modifications.

startTransition

This feature aims to make the app responsive even when massive screen modifications are made. Users will be able to mark state updates as transitions, which will be handled as non-urgent as a result of this functionality. As an example, consider a search input field.In this case, two things would happen: one field would display the user typed input in the UI, while the other would search for the data provided by the user.

Now, displaying the typed input is a priority, while searching for the data is not. As a result, we’ll be able to define search functions as transitions, allowing React to prioritise updates and make the UI appear more responsive.Non-urgent updates, on the other hand, may be interfered with by other urgent updates, such as clicking or pressing. To continue, enter the following code:

import { startTransition } from 'react';
 {/* Urgent: Show what was typed */}
setInputValue(input);
 {/* Mark any state updates inside as transitions */}
startTransition(() => {
{/* Transition: Show the results */}
  setSearchQuery(input);
});

setTransition Vs setTimeout

• setTimeout has a guaranteed delay while the setTransition widget depends on the other urgent tasks in hand and speed of the device.
• User can check the status of the transition using the useTransition hook whether the given transition are pending or not.
• setTimeout sometimes freezes the page, which is not the desired result. But that’s not the case in setTransition as the process can manually be interrupted by other urgent updates.

New Suspense SSR

This functionality boosts the performance of React’s server-side rendering (SSR).

What is SSR?

SSR uses React components to build HTML on the server, which it then provides to the users. SSR essentially allows the user to see the content of the website before the Javascript bundle loads and runs. The user will see a blank page while the Javascript loads if you don’t use SSR.The ability to stream HTML and selective hydration are two main aspects of SSR that make it useful.

Hydration is the process of rendering components and attaching event handlers.

Problems with SSR today

Before you start hydrating any of the components on the client’s side, you must first collect all of the data on the server and load the JavaScript code for all of the components on the client’s side. Before a user can interact with any of the components, they must all be hydrated, which poses issues when using server side rendering.

Selective Hydration

When the HTML is streamed, React will show additional elements like Spinner before sending static HTML like headers, sidebars, and menus. The comments component, for example, will become a heavy lifting component because it relies on data from the database to display Spinner when it is ready.We can’t start hydrating the app on the client until the JS code for the Comments area loads. The solution is our second SSR function, selective hydration, which we discussed earlier.

In this scenario, selective hydration prioritises which components need to be loaded first, with user interaction taking precedence. When a user interacts with one of the components, React will hydrate it first.This is how a large JS component doesn’t stop the rest of the page from becoming interactive, and it’s also how we can hydrate the app before the Comment widget loads.

Conclusion

With this latest release, React has officially published its alpha version. All of our previous issues have been resolved with these new features, and you can now:

• Before all of the data is fetched, stream HTML.
• Before all of the HTML has been streamed, hydrate the page.
• Before all of the components are hydrated, interact with a page.
• It’s also not necessary to hydrate components in order for them to communicate with each other.