What’s New in React 18: The Latest Features and Updates

Concurrency

Concurrency means tasks that can overlap. Let’s understand it with a phone analogy.

No concurrency means that I can have a conversation with one person at a time. If I’m talking with John and get a call from Jane then I have to first end the conversation with John and then will be able to start the conversation with Jane.

Concurrency means I can have more than one conversation at the same time. For example, if I’m talking with John and get a call from Jane then I will put John on hold and start talking with Jane.

It doesn’t mean that I can talk with two people at the same time. It means I may be in multiple conversations but I will choose who to talk to first based on priority.

useTransition Hook

In React 18, React came up with a concept called Concurrency.

By default, all state updates in React are considered urgent, which is not used every time because sometimes we want an immediate state update as soon as we interact with it, like selecting a value from the dropdown, or typing into the input box. But with the useTransition hook, we can mark UI updates as low priority. Which is very useful for heavy non-urgent updates.

We mark updates as non-urgent or low priority is called transition.

Let’s understand it with an example. For example, we have one input box and 10,000 products listed. So when we type something into the input box and then the filter logic works, but if the user hasn’t had a high processor system then it might take time to update the state and reflect it to the UI. So what will happen, until the product filtering process is not done and the state is updated we also have to wait for the input value change which is not a good user experience. So with this scenario input state change is a higher priority and the filtering process has a lower priority.

We can achieve this with the help of the useTransition hook.

Let’s look at the syntax of the useTransition hook.

useTransition hook returns an array of 2 items.

1. isPending:- It shows whether that transition is in a pending state or not.
2. startTransition:- It is a function, in which we can mark UI updates as transitions.

When we wrap our group of states into the startTransition method then that group of state updates has low priority as compared to other state updates. 

As we can see in the above example, our filterTerm state has low priority and we can show a loading indicator until that low-priority state gets updated. This is very useful to improve the user experience of our web application. Otherwise what will happen if both states are urgent then if the user types something into the input box then until the filter state has not been updated, the user also has to wait to get the value in the input box, which he has entered. 

useDeferredValue

useDeferred value works the same as the useTransition hook. So when to use one over the other.

We have to use the useDeferred value when we don’t have control over our state or state updation logic you could say.

Remember the example which we discussed in the useTransition hook. In that example, if the state updation and filtering logic is done from the server side and we don’t have control over it, then how can we mark our state as low priority or transition you could say?

So in this type of scenario, we have to use the useDeferredValue hook. useDeferredValue takes the value and returns the deferred value.

First, we have to import it from React. In this example let’s assume that the products which we are receiving via props, are what we are getting from API.

Automatic Batching

Batching means when a group of states gets updated together within browser events or event handlers ( onChange, onClick, etc..). So in batching our group of state updates first and then our component will re-render one time, Which gives us a performance boost. No matter how many groups of states we are updating it will re-render only one time for every batching.

But before React 18, if we tried to update our group of states outside of browser events or event handlers, batching was not happening and components were rendering for every state update. E.g. We have a group of 3 states and we update them then our component will re-render 3 times.

So if you try to run both examples in React 17 then you will see that in the first example, our component will re-render only once.

When a group of states updates within event handlers and hooks is called batching. So for every state update, it prevents re-rendering and gives us a performance boost.

Before React 18, batching only worked in browser events. Like onClick, onChange.
But React 18 introduced a new feature called Automatic Batching. It will enable batching for all state updates, no matter where we are updating them.

If you run this code and see an output then you can see that when you click on the button, batching will be done for both state updates and the console.log message will display only one time.

It works fine and there is no issue. But what if we try to update both states outside of the browser events?

Let’s take a look.

In this example we try to update both states in the callback of a fetch() and fetch is not a browser event, so batching will not happen. And when we click on submitAsyncHandler, we will see a console.log message for each state update. So here we will see two console.log messages on every click.  This will happen only if you are using React version below 18.

This will not happen if you are using React version 18, so with version 18, the concept of Automatic Batching will be applied and when we run this code, we will see only one console.log message for every click, no matter how many states we are updating together.

useId Hook

useId hook is used to generate a unique random ID. We can generate unique random IDs on both the client side and the server side.
Before the useId hook, we had useOpaqueIdentifier, but it had many bugs. So the React team solved all of those bugs and introduced useOpaqueIdentifier with the new name called useId.

When we generate a new unique Id with useId hook, it always gives us a string. With the help of the useId hook, we can join two React elements.

So as you can see, we generated a unique id from useId and displayed it and we gave that id to both labels so we concat that id with our id’s name. But one thing to remember is that we can’t give CSS to that id which we generate from useId.

We can concat or prefix another string with our unique generated id. We just have to add a second argument as an object {identifierPrefix: ‘YOUR_PREFIX_STRING’ } of root in index.js / tsx file.

As you can see after adding our string as identifierPrefix we get a prefix to our every ID.

Another thing to remember is that we should not use these Ids in Listing. This point is mentioned in the official documentation of React.

renderToPipeableStream

It is a node.js specific API. To use this API first we need to import ReactDOM from ‘React-dom/server’ then only we are able to use renderToPipeableStream.

It is used to render a React element to its initial HTML. It will return pipe and abort methods. It supports suspense and streaming.

Let’s understand the above example and what these methods are actually doing.
First, we have the onShellReady method. In this method, we can set the error code if we get some error before we start the streaming.
E.g.

The Second method is the onShellError method. It is used to emit an alternative shell. In this, we write the code for if some error occurred before we complete the shell so we emit an alternative shell.

Next one is the onAllReady method. This method will run when the content of the entire page is ready. When we don’t want to stream, we should go for this method instead of onShellReady. For a static generation, we can use this method.

useSyncExternalStore

Before diving into useSyncExternalStore, first let’s understand related concepts to useSyncExternalStore.

It’s a lower-level API.

External Store: Redux store, Mobx store, global variables, DOM states, etc.

Internal Store: Props, useState, useReducer, context e.t.c.

Tearing: Tearing means we get different values for the same state.

Tearing is happening in React 18 because of the way concurrent features of React 18 work. We can pause re-rendering and between that pause how external stores communicate with React to trigger re-render and that’s why we get the different values of the same state.

So we have a new API that lets you do the same.

Suspense

Suspense is a React component that suspends a component from being re-render. Until the component is in suspense, it will display fallback options. We must pass a value into fallback. It could be a string or some component like Spiner.

Suspense only works with dynamic import or lazy loading.