React 18 Road Map

Manish Johar
Jun 14 · 4 min read

The Facebook team has released an upcoming plan for React 18 features.

The Facebook team has published the plan for React-18. There are many exciting features that are provided out of the box by React. These are not only enhancing the user experience but also making developers’ lives easier. So, here are the three main features which are going to be released this time.

1. Automatic Batching

Batching is when React groups multiple state updates into a single re-render for better performance.

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:

This is great for performance because it 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. This might remind you of how a restaurant waiter doesn’t run to the kitchen when you choose the first dish but waits for you to finish your order.

However, React wasn’t consistent about when it batches updates. For example, if you need to fetch data, and then update the state in the handleClick above, then React would not batch the updates, and perform two independent updates.

This is because React used to only batch updates during a browser event (like click), but here we’re updating the state after the event has already been handled (in fetch callback):

In automatic batching (after upgrading to React 18), no matter from where the states are originating, it will always be re-rendered once.

What if I don’t want to batch?

In this case, you will have to use flushSync in order to re-render the component.

2. SSR support for Suspense

This is basically an extension of Server Side Rendering (SSR) logic. In a typical React SSR application, the following steps happen:

  • The server fetches the relevant data which needs to be shown on UI
  • The server renders the entire app to HTML and sends it to the client in response
  • The client downloads the JavaScript bundle (apart from HTML)
  • In the final step, the client connects the javascript logic to the HTML (which is known as hydration)

The problem with a typical SSR application is that each step had to finish for the entire app at once before the next step could start. This makes your app a bit slower and unresponsive at initial load time.

React 18 is trying to solve this issue. <Suspense> component has been revolutionized in such a way that it will break down the app into smaller independent units which go through each of those steps mentioned. So that once the user sees the content, it becomes interactive.

3. Transition

This is an incredible feature going to be released. It lets users solve the issue of frequent updates on large screens. For example, consider typing in an input field that filters a list of data. You need to store the value of the field in the state so that you can filter the data and control the value of that input field. Your code may look something like this:

// Update the input value and search results
setSearchQuery(input);

Here, whenever the user types a character, we update the input value and use the new value to search the list and show the results. For large-screen updates, this can cause lag on the page while everything renders, making typing or other interactions feel slow and unresponsive. Even if the list is not too long, the list items themselves may be complex and different on every keystroke, and there may be no clear way to optimize their rendering.

Conceptually, the issue is that there are two different updates that need to happen. The first update is an urgent update, to change the value of the input field and, potentially, some UI around it. The second is a less urgent update to show the results of the search.

// Urgent: Show what was typed
setInputValue(input);
// Not urgent: Show the results
setSearchQuery(input);

The new startTransition API solves this issue by giving you the ability to mark updates as “transitions”:

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);
});

React 18 Working Group

Facebook has created a working group of authors, maintainers of famous libraries. They have been discussing these features to get early feedback. These discussions are open and anyone interested can follow. Here are the links which I have been following:

The good thing is that React 18 doesn’t have any breaking changes, so upgrading our current repositories to the latest version would take very little to no code change. And we can enjoy their cool features.

Thanks for reading this story.

References:

Geek Culture

Proud to geek out. Follow to join our 1M monthly readers.