In its latest update (v18.0), React is focused on a new concurrent renderer. It’s a new behind-the-scenes mechanism that enables us to prepare multiple versions of the UI at the same time and brings us new features and functions to improve the performance and fluidity of our applications.

Below we'll show you some of the main new features of React 18:

  1. Automatic Batching

We can now bundle updates from multiple states into a single render state without having to wait for each of them to render, it allows a better performance.

// Before: only React events were batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will render twice, once for each state update (no batching)
}, 1000);
// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that's batching!)
}, 1000);

Transitions

This is a new concept and one of the most important in React 18, it  allows us to distinguish between urgent and non-urgent state updates.

This feature allows to improve user interaction, the urgent updates will have  priority and their changes will be reflected immediately in the UI.

We can use startTransition API to define which updates are urgent and which are “transitions”, the updates wrapped in startTransition are handled as non-urgent.

The "transitions" will be interrupted by users' direct interaction, like typing, clicking, pressing, and so on.

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

3. Suspense

If we are working with data from any server, sometimes loading this data can be slow. Now it is not necessary to wait for the data to load, the new Suspense functions allow us to see the rest of the page and React can stream a HTML tag for the fallback, for example, a spinner. When the data is ready they will be added gradually.

Advantages of NR 02

4. useID

It is a new hook for generating unique IDs on both the client and server site. It is useful for component libraries integrating with accessibility APIs that require unique IDs because it avoids hydration mismatches.

const id = useId();
 
function Checkbox() {
 const formId = useId();
 return (
   <>
     <label htmlFor={formId}>Do you like Parrolabs?</label>
     <input id={id} type="checkbox" name="react"/>
   </>
 );
};