What’s New and What’s Changed in React 18?

React is a front-end JavaScript library for creating user interfaces based on UI components that is free and open-source. Meta and a community of individual developers and companies maintain it.

With the release of React 18, some exciting new features have been introduced. When React 18 was announced a year ago, the team promised a phased approach. Now, a year later, they’ve done exactly that, and you can update your app to the most recent version.

Depending on how you use React 18, it contains a few breaking changes. Overall, it brings out-of-the-box performance improvements, such as batching more by default, which eliminates the need to batch updates in application or library code manually.

Per React blog

“Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.

Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it’s only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications.”

Some will find this incredible, while others may need more convincing. So, let’s take a closer look at some of the most significant new changes introduced by Facebook’s team.

React 18’s Automatic Batching

React 18 introduces automatic batching. Automatic batching means that React will now batch updates made within components. Batching prevents your component from being rendered inadvertently.

If you change the state of a component twice in React 17, the component will re-render twice. In React 18, the two updates will now be batched, and the component will only be rendered once. And only if you use createRoot instead of render.

If you don’t want automatic batching in your component, you can always use flushSync to disable it.

Transitions

Transitions is a completely new concept introduced in React, or in other words it is a new API in React 18. It distinguishes between urgent and non-urgent updates. Now you might be wondering what are urgent and non-urgent updates? So, urgent updates are those that reflect immediate involvement, such as clicking, typing, pressing etc. The UI is transitioned from one view to another in a non-urgent way with transition updates.

New Root API Introduced

Redesigned APIs are accessible for client and server rendering in React 18’s beta version. This allows you to keep utilising the old React 17 APIs while upgrading to the new React 18 APIs. As stated by React blog.

React DOM Client

React-dom/client now exports the following additional APIs:

createRoot: A new method for rendering or unmounting a root. It should be used instead of ReactDOM. render. It is required for new features in React 18.
hydrateRoot: A new hydrate method for a server-rendered application. It should be used instead of ReactDOM. hydrate when used with the new React DOM Server APIs It is required for new features in React 18.

React DOM Server

These new APIs are now available from react-dom/server and include full server support for streaming Suspense:

• For streaming in Node environments, use renderToPipeableStream.
• For current edge runtime environments, such as Deno and Cloudflare workers, renderToReadableStream is used.
• The renderToString method is still functional, although it is discouraged by React.

Suspense Server-side Rendering (SSR)

In React 18 updates and changes, Suspense has now been added to the server. Earlier, it was available on the client-side via code splitting with React.lazy. However, you can now have some sort of placeholder while your components “suspend.”

If any of the components in the tree “suspend,” Suspense will fall back to the component you give it. But what does it mean when we say a component to be “suspended”? It can mean many things, but in React terms it always means that the component isn’t ready to render — it might be missing data or code.

Now third-party data-fetching libraries are also welcome to contribute to Suspense. Some GraphQL or REST libraries can suspend components until requests are completed. You can run your own ad hoc solution for data fetching and Suspense, but it is not recommended.

React 18: Five New Hooks to Look Out For

React 18 includes five new hooks:

useId

useId is a new hook that allows you to generate unique IDs on both the client and the server while avoiding hydration mismatches.

useTransition

useTransition and startTransition allows you to mark certain state updates as not urgent. However, other state updates are automatically considered as urgent.

useDeferredValue

You can use useDeferredValue to defer re-rendering a non-urgent part of the tree. It functions similarly to debouncing or throttling, but with a few advantages. Because there is no fixed time delay, React will attempt the deferred render immediately after the first render is displayed on the screen. The deferred render is interruptible and does not interfere with user input.

UserInsertionEffect

UseInsertionEffect has the same signature as useEffect, but it fires synchronously before all DOM mutations. This hook that enables CSS-in-JS libraries to address performance issues associated with injecting styles in render. It will be executed after the DOM has been mutated but before the layout effects have read the new layout. This resolves a problem that existed in React 17 and earlier. This hook is intended to inject styles into the DOM before using useLayoutEffect to read layout. It cannot schedule updates and does not have access to refs.

useSyncExternalStore

useSyncExternalStore is a new hook for reading and subscribing to external data sources in a manner compatible with concurrent rendering features such as time slicing and selective hydration. It eliminates the need for useEffect when implementing subscriptions to external data sources and is recommended for any library that integrates with state that is not React-related.

What’s More?

Goodbye, Older Browsers!

React now relies on modern browser features such as Symbol, Promise, and Object.assign.

New Restrict Mode Behaviors

Strict Mode now has a new development-only check in React 18. When a component mounts for the first time, this new check will automatically unmount and remount it, restoring the previous state on the second mount.

Components can render Undefined

Unlike before, if you return undefined from a component, React no longer throws an error. The allowed component will return the values that are consistent with values that are allowed in the middle of a component tree.

Bottom Line 

React 18 includes incredible features that address the shortcomings of React 17. The improvements appear to be significant. With React 18, new possibilities for developing React JS apps emerge. Which feature piques your interest the most?