What’s New In React 18?

React 18 has finally here, after much speculation and a long wait. This current version provides a slew of new features, including a startTransition API, automatic batching, and the much-anticipated Suspense feature. Concurrent Mode is also available.

They discussed the React 18 vision extensively at React Conf 2021. The following are a few of the most vital points:

The React 18 keynote begins with an overview of react’s aim; to make it simple for developers to create ambitious experiences. Developers use it to construct everything from basic web pages to feature-rich apps.

  • Juan Tejada describes the Suspense function in detail.
  • Shaundi Person discusses server-side rendering.
  • Shruti Kapoor discusses the new capabilities in React 18 and how to use them.
  • Xuan Huang discusses compiler research.
  • Daishi Kato discusses React 18 and Third-Party Integration.

Take a peek at the React 18 keynote for additional details.

Let’s Take A Quick Look Into What To Expect In This New React 18

What is New in React 18 1

First, we’ll look into Concurrent Mode.

Concurrent Mode

Among the most significant characteristics is concurrency. Concurrency is more of a backstage method that allows react to create many UI variants simultaneously than it is functionality. React employs complicated methods like priority queues and multiple buffering in its internal implementation; although these aren’t visible in the public APIs. React conceals technical details from developers; allowing react developers to focus on what the user experience should be like; while react takes care of how that experience is delivered.

On the other hand, a Concurrent response is more crucial than a usual implementation detail; and it’s a more fundamental modification to the react rendering paradigm. Though understanding how concurrency works aren’t essential, it’s helpful to have a high-level understanding of the concept.

Synchronous rendering is another fantastic feature of React 18. Updates are displayed in a single uninterrupted transaction; when you initially upgrade your project to react 18 before adding any concurrent features. Nothing can stop an update from rendering once it starts; until the user sees the result on the screen using synchronous rendering.

React ensures that the UI will show consistently even though the rendering is paused. It does this by performing DOM modifications after the entire tree has been reviewed. Transitions, Stream server rendering, and Suspense are all built on top of concurrent rendering, a new and powerful technology. The reusable state is an additional example. Concurrent react allows you to remove portions from the user interface and replace them later while keeping the initial state.

Also Check: Top 6 Android App Development Framework

Automatic Batching

Batching is always used to group state updates when employing event handlers and built-in hooks. It prevents components from re-rendering all state updates needlessly, resulting in better speed. Batching was only available for browser events until React 17 was released. However, with React 18, a new and enhanced version known as ‘Automatic Batching’ has been introduced. All changes are automatically batched in React 18 when using createRoot, regardless of where they came from.

Before Automatic Batching, manual batching was limited to batched changes within react event handlers. SetTimeout updates, native event handlers, promises, and other events were not batched by default in react. These would be batched automatically with the release of react 18 and automated batching. Official react 18 documentation may be found here for more information on automatic batching.

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

Source: https://reactjs.org/blog/2022/03/29/react-v18.html

Also Check: The Use And Role Of JavaScript in Web Development

Transitions

A transition is an entirely new concept recat18 that aids in the differentiation of urgent from non-urgent updates. The critical updates result from direct engagement, such as typing, clicking, pushing, etc. The UI is transitioned from one view to the next via transition updates.

Urgent Updates, such as typing, clicking, or pressing; require a quick reaction to match our perceptions of how real things respond. Transitions, on the other hand; are unique since the consumer does not need to have every intermediate state on the screen.

Single-user input should generate both an urgent and a non-urgent update for the optimum user experience. To tell React which changes are “Transaction” and which are “Urgent,” use the startTransition API within an input event.

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

To provide the best user experience, single-user input should offer both an urgent and non-urgent update. Use the startTransition API within an input event to notify React which changes are “Transactional” and “Urgent.”. In React 18, there are two methods for beginning a transaction.

  • useTranscation: It’s a transaction-starting hook with a value to keeping track of the pending status.
  • startTranscation: This approach is used when the hook isn’t available to initiate transitions.

Concurrent rendering will be enabled for transitions, pausing the update. The transaction additionally instructs React to continue presenting its contents; while rendering the transaction contents in the background if the content is re-suspended. Check out the official documentation on Transactions for additional details.

Also Check: What Are The Benefits Of Using AngularJS For App Development

Suspense Features

React Suspense is one of React 18’s most eagerly anticipated features. React Suspense is a react component that enables developers to suspend the rendering of a component; until a given condition is satisfied, with a fallback option displayed. Suspense is a component tree loading state if it isn’t yet ready to be shown.

<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>

In the React programming model, Suspense turns the “UI loading state” into a first-class declarative notion. On top of it, as discussed before, it helps to build higher-level features. A restricted version of the thriller was released a few years ago—code splitting with React. Slow was the only allowed use case, and it was not supported at all while rendering on the server.

Suspense support on the server was added in React 18, and concurrent rendering features were added to increase its possibilities. When paired with the transition API, Suspense works best. React will not allow visible content to be replaced by a fallback if you suspend during a transition. React will defer rendering until enough data has loaded to avoid a problematic loading state. Check out the official documentation here for additional information about Suspense.

Also Check: Best Node JS Frameworks for Web Apps in 2022

New Client & Server Rendering APIs

Client and server rendering API updates are included in the current version of react18. With these updates, users may continue to utilize the old React 17 APIs; while migrating to the new React 18 APIs. Let’s have a look at the revised React 18 APIs.

React DOM Client

From react-dom/client, these additional APIs are now available:

  • createRoot: Use ReactDOM.render instead of ReactDOM.render in React 18 to render or unmount the root.
  • hydrateRoot: For server-rendered apps, this is a revolutionary hydration strategy. You may use this instead of ReactDOM. The new React DOM Server APIs and hydration.

Both createRoot and hydrateRoot now have a new option called onRecoverableError that may be used to be notified; when React recovers from difficulties while rendering or hydration for logging. React will use reportError or console as a fallback in older browsers. Read on to find out more. Official documentation here.

React DOM Server

These new APIs are exposed from react-dom/server and provide server-side support for streaming Suspense.

  • renderToPipeableStream: In Node Environment for Streaming
  • renderToReadableStream: Deno and Cloudflare workers, for example, are current edge runtime environments.

Although the renderToString function currently exists, it is not advised. Read on to find out more about the official documentation here.

Also Check: React JS – a Popular Choice of Web Development

New Hooks

The following are some of React 18’s new hooks.

  • userID: It’s a new hook that lets both the server and client create unique IDs while preventing hydration mismatches; used mainly by component libraries that need a unique ID to integrate with accessibility APIs.
  • useTransition & startTransition: Developers can use this feature to designate state modifications that aren’t critical or urgent. When you do so, other states are given equal weight.
  • useSyncExternalStore: External stores can now enable concurrent readings to one of the new React hooks; that force synchronous changes to the store. When subscribing to external data sources, utilizing with eliminates the need to useEffect.

Also Check: React Native 0.61: All-New Fast Refresh And Other Value Additions For Developers

Wrapping up

These are the most recent React 18 modifications to be aware of when working before your next react project. To upgrade the existing react project to the current version; you’ll need to hire reactjs developers from a reputable IT firm with prior react development expertise.

Also Check: How To Make Dynamic Web Apps Using ReactJS

DMCA.com Protection Status

Discover more from InfoToHow

Subscribe now to keep reading and get access to the full archive.

Continue reading