React's latest version was recently released, featuring a number of out-of-the-box changes as well as a new concurrent rendering opt-in method. The new version emphasizes a progressive adoption strategy, which means you may upgrade to React 18 with no or minor code modifications. That's quite a feat. Isn't that so?

But, before we get into the new features, there's something you should be aware of: the React 18 Working Group (WG). The purpose of this group, which was introduced for the first time in React development, is to prepare the ecosystem for the gradual and smooth adoption of the future version by leveraging existing applications and frameworks. The talks are open to the public on Github Discussions, and all material is available at the aforementioned website. The most remarkable aspect of this new version is that it makes us feel like we're a part of the research process for future new features. As you've probably noticed, React 18 has a lot to offer, so let's jump right in and have some fun.

Install React 18 by following these steps:

npm install react@alpha

And ReactDOM,

npm install react-dom@alpha

What's New in React 18?

1.The new root API:

We normally add the React App to a Root level DOM level like this. This has been deprecated and replaced by the "Legacy Root API."

import React from 'react';

import ReactDOM from 'react-dom';

const container = document.getElementById('root') 

ReactDOM.render(<App />, container);

Instead, a new Root API is introduced in React18, which looks like this :

import React from 'react';

import ReactDOM from 'react-dom';

import App from 'App'

const container = document.getEleementById('root')

const root = ReactDOM.createRoot(container)

root.render(<App />)

To ensure a smooth transition from React 17(or older) to React 18, React18 will ship with both the Legacy Root API and the New Root API.

2.startTransition API:

This is a new API introduced with this release that aids in maintaining the current webpage's responsiveness while also allowing for massive non-blocking UI modifications.

When a user begins typing in a search box, one key use case for startTransition could be. The input value must be updated quickly, whereas the search results may be delayed for a few moments (as expected by the user).

This API allows you to distinguish between immediate and delayed updates. Transition Updates are the delayed updates (i.e. the transition from one UI display to another).

We call props/functions like this for urgent updates like typing, hovering, and clicking:

setText(input)

We can wrap it in a startTransition API for non-urgent or large UI updates as:

startTransition(() => {

  setText(input);

});

3.Strict Effects will be added to Strict Mode.:

React18 will ship <StrictMode /> along with Strict Effects Mode now. Just like Strict Mode, this would be for development builds and improved DX.

When a component is wrapped in Strict Effects, React ensures that side-effects are "intentionally" run twice to detect unexpected behavior/patterns, which is typically a pain point when working with useEffect mounting and cleaning procedures.

4.Suspense List:

Another concurrent React 18 feature that "orchestrates" the appearance of heavy data fetched components on the screen.

A <SuspenseList /> takes in revealOrder prop with values forward, backward or together

<SuspenseList revealOrder="forwards">

  <Suspense fallback={<LoadingSpinner />}>

    <CardComponent id={1} />

  </Suspense>

  <Suspense fallback={<LoadingSpinner />}>

    <CardComponent id={2} />

  </Suspense>

 </SuspenseList>

In this case, the card component will be revealed from the front (until the data is fetched, will fall back to LoadingSpinner Component). backwards reveals Cards in reverse order, while the combined prop renders everything "together."

5.SSR improvements:

The architecture of Server-Side Rendering has been overhauled in this release, with improvements to the first loading screen time. SSR had to load the complete page in the simple version (before React 17) before it could begin hydrating the page.

This changes in React18, now we can break React components into smaller chunks using <Suspense />.

This is now called selective hydration.Wrapping a component now will begin hydrating the very specific component once the code has been loaded and it does not block the rest of the page, assuming we have 4 - 5 separate components on the screen. This method allows more critical parts/components of the page to become interactive first (even if the connection is extremely poor), while other components continue to hydrate and provide a nice user experience.

Here, the <Delayed /> component won't be resolved until the data is fetched, till then the component will fall back to <LoadingSpinner />.

We can use <Suspense /> for several components fetching data at different times keeping important components interactive.

<Layout>

  <Suspense fallback={<LoadingSpinner />}>

    <DelayedComponent />

  <Suspense />

<Layout />

6.useDefferedValue:

useDefferedValue takes a state value and a millisecond timeout, then returns a "deferred version" of that value. This value is delayed by the timeout seconds specified.

const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });

This could be a scenario when a text input field would be useful.The text input would be immediately rendered to the screen however the <CardLists /> text props takes in a useDeferredValue and returns a defferedText which lags by 3 seconds. As a result, the Card Lists component is delayed while the text field remains responsive to users.

Conclusion

Because the application and library authors may have a smooth transition and not any breaking changes, React18 has focused on concurrent capabilities rather than a full-fledged concurrent mode (which has been heavily advertised since React16).

Because React18 is still in alpha and not ready for production, APIs may change until it reaches a stable release before the end of the year (expected). This brings us to the end of our React18 post.We are quite excited, as a leading react js development services, and we know you are as well! So, folks, stay tuned to learn about the latest developments.