What’s new in React 18?

Today we will learn about React 18, finally, we have the stable version of React 18. Now we will cover what changed in the new version.

React 18 is more focused on making the UI more performant by introducing out-of-the-box features and improvements powered by “concurrent rendering”. React18 introduces minimal breaking changes.

Let’s take a look at the major updates of React18:

Root API

React18 introduces Root API ReactDOM.createRoot. Before React18, we used ReactDOM.render to render a component to the page. Going forward with React18, we will use ReactDOM.createRoot to create a root, and then pass the root to the render function. The good news is that your current code with ReactDOM.render will still work, however, it is strongly recommended to start transitioning to createRoot as render will be marked deprecated starting React18. The current ReactDOM.render is only provided to ease the transition to React18.

React 17:

import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
ReactDOM.render(<App />, container);

React 18:

import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
// create a root
const root = ReactDOM.createRoot(container);
//render app to root
root.render(<App />);

Automatic batching

React 18 introduces a new feature that will automatically batch multiple state updates, reducing the number of times a component has to re-render.
Batching is when React groups multiple state updates into a single re-render for better performance. This is great for performance because it avoids unnecessary re-renders.
Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically:

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

Concurrent rendering

If the entire React 18 update has to be summed up in one word, it would be Concurrency.

Concurrent rendering will allow React to break up large updates into smaller chunks, making it possible for the browser to process updates more efficiently.
At a high level, concurrency basically means that tasks can overlap. Rather than one state update having to be fully complete before the system can move on to the next one, concurrency allows us to bounce back and forth between multiples.

Note: This doesn’t mean those things are all happening at the same time — rather, it’s that one task can now be paused while other, more urgent tasks are completed.

Suspense Features

Like its name, Suspense suspends something until it’s ready to be rendered.

Suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed:

<Suspense fallback={<Loading />}>
    <ComponentWaitingForData />
    <ReadyComponent />
</Suspense>

Referring to the above code, Now it won’t mount the ReadyComponent, instead will wait for ComponentWaitingForData to resolve first.

New Hooks

useId

useId is a new hook for generating unique IDs on both the client and server while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it’s even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order.

Note: useId is not for generating keys in a list. Keys should be generated from your data.

useTransition

useTransition and startTransition let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).

useDeferredValue

useDeferredValue lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn’t block user input.

useSyncExternalStore

useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React.

Note: useSyncExternalStore is intended to be used by libraries, not application code.

useInsertionEffect

useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in the render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below but is even more important in React18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate the layout.

Note: useInsertionEffect is intended to be used by libraries, not application code.
For detailed information, check React Documentation

To know more about React, check our React Articles

Now you are React18 ready too!

Happy Coding 🙂