React 18 Release and its Advancements

React, developed by Facebook, has been one of the most popular JavaScript libraries in the world of web development. On September 2021, React 18 alpha was released with the beta scheduled for October 2021. This new version comes with several new features and improvements which we will discuss in this article.

一、Concurrent Rendering

React 18 introduces Concurrent Rendering that allows React to pause and resume rendering as required. This means a more responsive UI and faster rendering. Let’s see how it helps in a real-life scenario:

function SearchResults({query}) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    async function search() {
      const results = await fetchResults(query);
      setResults(results);
    }

    search();
  }, [query]);

  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.name}</li>
      ))}
    </ul>
  );
}

In the above example, we are fetching search results asynchronously from an API using useEffect. Now, if the user types in the search bar, React will terminate the previous rendering process and start rendering with the new data as soon as possible. This is made possible by Concurrent Rendering.

二、Automatic Batching

Automatic batching is another feature in React 18 that will help make our application more efficient. React will group multiple state updates into a single state update to the DOM. This way, the application doesn’t need to re-render and update the DOM multiple times for multiple state updates. This will reduce the load on the browser and lead to a faster application.

function handleClick() {
  setCount(count + 1);
  setStatus('Clicked');
}

function handleDoubleClick() {
  setCount(count + 1);
  setStatus('Double Clicked');
}

In the above example, the count is updated twice on both click and double click events. With React 18’s Automatic Batching feature, these two updates will be grouped as a single update to the DOM.

三、New APIs

React 18 also introduced some new APIs to make developers’ lives easier:

SuspenseList Component

SuspenseList component allows us to render multiple Suspense components. It can be used to show a loading indicator while waiting for data to load. Let’s see a code example:

function App() {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={<p>Loading posts...</p>}>
        <Posts/>
      </Suspense>
      <Suspense fallback={<p>Loading images...</p>}>
        <Images/>
      </Suspense>
    </SuspenseList>
  );
}

useTransition Hook

useTransition allows us to add a loading state between one action and another to prevent the user from thinking that the process is frozen. Here is how we can use it:

const [isPending, startTransition] = useTransition();

function handleButtonClick() {
  startTransition(() => {
    makeApiRequest();
  });
}

function makeApiRequest() {
  // Code to make the API request
}

四、Conclusion

React 18 brings new features that will help make our applications more responsive and efficient. With Concurrent Rendering, Automatic Batching, and new APIs, React is once again setting new standards in the world of web development. By optimizing the performance, it not only improves the user experience but also makes developers’ work much easier and productive.