React 18, react

React Core Team released an alpha version of React18 recently. This release is more focused on UI and internals of React.

As per React team on June 08, 2021 — “We don’t have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.”

Want to Try React 18

Use the following commands for React 18

**npm install react@alpha  
npm install react-dom@alpha**

What’s coming in React 18

Root API —

A new Root API is introduced in React18 for creating ROOT level DOM

Benefits —
1. Easy to use hydrate function const root = ReactDOM.createRoot(container, { hydrate: true });

2. Improvements in render callback

startTransition API —

Import and use like

`import React, { useState, useTransition, Suspense } from "react";  
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });`

startTransition is a function. We’ll use it to tell React which state update we want to defer.
isPending is a boolean. It’s React telling us whether that transition is ongoing at the moment.

use-cases-
1. wait for some content to load before transitioning to the new screen.
2. User starts typing in a search box. The input value has to be immediately updated while the search results could wait a few milliseconds

startTransition(() => {

setState(data);  
});

And use `isPending like`

{isPending ? " Loading..." : null}

Suspense and SSR Improvements —

The main idea is to load slow components using Suspense API and rest components as usual.

Selective hydration — break React components into smaller chunks using

<Suspense />  
`<Suspense fallback={<Loader />}>  
    <Component/>  
  <Suspense />`

Automatic batching

Automatic batching in React 17 is not consistent but in React 18 it is consistent and it will be as default in React 18. but if you want to opt-out and want the same behavior as React 17, you can use the flushSync function as below

This release is more focused on UI and internals of React and there will be no breaking changes as per React team.

Happy learning… 👏👏

The Plan for React 18v | What’s coming in React 18