What’s New in React 18?

React is a JavaScript library for creating user interfaces. React helps to build UI-rich web applications that are efficient enough in terms of user engagement and functionalities. You must know, that technology has gained lots of attention because of one of the great reasons that Facebook has designed it.

Other reasons behind it are its component-based approach, Flux & Redux architecture, fast rendering of Virtual DOM, and its support for a large number of libraries.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Automatic Batching

To attain improved computational performance, React groups multiple updates altogether in a single state as a result which “Batching” occurs. In React, batching helps to reduce the number of re-renders that happen when a state changes, when you call setState.

For example, if you have two state updates inside of the same click event, React has always batched these into one re-render. If you run the following code, you’ll see that every time you click, React only performs a single render although you set the state twice:

function App() {
  const [count, setCount] = useState(0);
  const [color, setColor] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setColor(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: color ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

This avoids unnecessary re-renders. It also prevents your component from rendering “half-finished” states where only one state variable was updated, which may cause bugs.

Until React 18, we only batched updates during the React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default.

Concurrency

The intent behind the new version is to offer ease to the developers along with a better user experience. Hence the adoption of React 18 is pretty simple, and one can do it conveniently. Also, the concurrent features are successfully delivered to the thousands of components that work for Facebook.

In React 18 with concurrent rendering, React can interrupt, pause, resume, or abandon a render. This allows React to respond to the user interaction quickly even if it is in the middle of a heavy rendering task.

Let's use this common example…

(Github discussion)

No concurrency means that I can only have one phone conversation at a time. If I talk to Alice, and Bob calls me, I have to finish the call with Alice before I can talk to Bob.

Concurrency means that I can have more than one conversation at a time. For example, I can put Alice on hold, talk to Bob for a bit, and then switch back to talking to Alice.

Concurrency doesn’t necessarily mean I talk to two people at once. It just means that at any moment, I may be in multiple calls, and I choose who to talk to.

Now, to translate the analogy, in React’s case “phone calls” are your setState calls. Previously, React could only work on one state update at a time. So all updates were "urgent": once you start re-rendering, you can't stop. But with startTransition, you can mark a non-urgent update as a transition.

SUSPENSE

If you are waiting for some data on the server, React can stream HTML for the fallback, and let the user see the rest of the page. When the data is ready, the user will able to see the content HTML.

This means that a single slow data source on the server will no longer hold the entire page back.

Imagine a component that needs to do some asynchronous task before it can render, e.g. fetching some data.

Before Suspense, such a component would keep an isLoading state and return some kind of fallback (an empty state, spinner, …) based on it.

With Suspense, a component can now, during rendering, shout “HALT! I’m not ready yet. Don’t continue rendering me, please — here’s a pager, I’ll ping you when I’m ready!”

Transitions

What is transition?

React divides state updates into two categories:

• Urgent updates reflect direct interactions such as typing, clicking, pressing, etc.
• Transition updates transition the UI from one view to another.

Urgent updates like typing, clicking, or pressing require an immediate response to match React’s intuition about how physical objects behave.

However, the transformations are different because the user doesn’t want to see every intermediate value on the screen.

Updates wrapped in startTransition are handled as non-urgent, and will be interrupted if more urgent updates like clicks or keypresses come in.Then, wrap the UI render in this function.

import {startTransition} from 'react';
startTransition(() => {

          // your code here

      });

When you type something in the search input, the text is rendered immediately. After you stop (or a couple of seconds pass), the React app renders the search result.

New Hooks

• useId : we can use this new hook to create a new identifier in the server and in the client.
• useTransition: to create a new state update that has lower priority.
• useDeferredValue: to update some deferred values in a controlled way (perfect for inputs, selects, etc).
• useSyncExternalStore
• useInsertionEffect