React 18 - what’s new

In October 2020, we met React 17. June 2021 is the time for the next update - React 18 . While the version, that appeared late last year, didn’t have any new features aimed at developers, and it contained only elements facilitating upgrading, the one that emerging in mid-2021 focuses on UX and internal architecture changes .

• Oliwia (React Developer)
• 29th June, 2021

The dynamic development of this library is described both as a plus and, interestingly enough, a minus of this technology. On the one hand, new functionalities mean more and more possibilities, on the other - an endless process of finding oneself in evolving solutions. What new features have been introduced this time?

The New Root API

Root DOM level created so far on a Root level, and adding React is a thing of the past. At previous version, it was shown a React application component and an application 'root element' container for ReactDOM.render

ReactDOM.render(<App />, document.getElementById('root'));

In the new Root API, we use the createRoot () method, to render a React element to a DOM node, to which we pass the application root (root element). After passing, we call render () and pass a React component to it.:

const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render(<App />);

Among all the improvements, we can find:

• improvement of ergonomic API elements,
• using hydrate () - previously used as:

  ReactDOM.hydrate (<App />, document.getElementById ('root'));

  now passed as an optional parameter to the createRoot method:

  const root = ReactDOM.createRoot (document.getElementById ('root'), {hydrate: true});
  root.render (<App />);

• it is suggested to use the requestIdleCallback, setTimeout or ref callback on the root methods, instead of the Legacy Root API callback function, which is an optional render () parameter.

StartTransition API

Responsible for the responsiveness of the UI, during significant state changes - it allows you to perform them without affecting the UI behaviour. Thanks to it, it is possible to distinguish between the types of introduced updates, into those performed immediately and with a delay.

For example, when entering a value into an input (quick change), we want to simultaneously perform a slower update of the data, based on the result of searching for a specific phrase. The second one can be therefore included in the startTransition API because the information contained therein is not processed immediately. This should successfully replace the setTimeout using, used to query the data after the user has finished typing in the filter. If there is an element more urgent to update - the change may be interrupted. In this case, React will drop the deprecated rendering in favor of the latest version, which saves time on rendering unnecessary content.

Strict Effects coming to Strict Mode

So far, the StrictMode has also received an update. Now, there is an additional new behaviour called "strict effects" mode. When applied, React invokes deliberate double effect strings, for newly mounted components, in order to eliminate undesirable effects:

mount -> unmount -> mount.

Automatic batching for fewer renders

React 18 uses the createRoot for all updates. All of them will be automatically batched for better performance. What does it mean? Internal updates such as setTimeOut, Promises, and those native event handlers, will be batched in the same way, as in-event updates, that occur in React. The purpose of introducing such automation, is to reduce the work performed during rendering, which will improve the efficiency of created products.

React native batching - React will batch updates automatically, so theese two pieces of code, will behave in the same way:

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

and second:

setTimeout(() => {
   setCount(c => c  + 1);
   setFlag(f  => !f); // React will only re-render once at the end  (that’s batching!)
},  1000) ;

Suspense

This update fully completes the <Suspense /> functionality, introduced in the base version of React 16.x.

<Suspense fallback={<Loading />}>
   <ComponentThatSuspends />
   <Sibling />
</Suspense>

Suspense displays the <Loading /> component, until the data from <ComponentThatSuspends /> has been resolved. In this case, the user's use of Suspense remains unchanged. The only difference is in its behaviour during rendering of the component. In the new version - Concurrent Suspense, sibling components are no longer placed in the DOM tree and their lifecycles are no longer triggered until the data is fully processed by <ComponentThatSuspends />.

Another component, SuspenseList , helps to coordinate the suspended elements and impose the order, in which they should be visible on the UI. With it, React won't show an item in the list, until the previous ones are loaded and displayed. It takes two parameters - revealOrder and tail, which determine the behaviour of the displayed data.

What does the Software Bay think about React 18?

“The biggest advantage of this update is definitely Automatic batching , after using the setState function in useState - react hook. For example, when we want to retrieve data in some component, that displays a spinner or skeleton loader during this action. Before the React 18 changes, we often had to deal with two renders of the component. One for injecting downloaded data to the state, and the other for updating the loader - turning it off. In this case, we often used two states - separate for data and for loader state. When receiving data from the API, using the setState function twice, resulted in two renders. Now, combining this into one, seems like a huge plus for application performance. It will also make it easier for less advanced developers to maintain better application performance despite component state change abuse.

I believe that such updates are absolutely positive. Theoretically, it is enough to update the React version in projects to get the previously mentioned improvements, without any changes to the application logic.

We hope that the creators of React, don’t prepare for us such a revolution, as it was when changing from class components to functional with hooks, with the next updates. Of course, significant changes to React are often a plus, but we must remember about our clients' applications, which must be preserved so that their further development does not require finding someone who was fluent in the previous version of react.”

.