React 18 is being release to Public soon early next year(may be Jan 2022) and having lots of exciting features and enhancement which you must be knowing, so that you should start using them.

useId()

• "React.useId()", provide unique value per component in your app.
• If you use same value assigned to variable, will give you same value.
• By using multiple times "React.useId()", each time it will give you unique value per component.
• It is unique per component only, with other component, value might be same.

Demo: With below example, I used same useId() value for firstName and lastName label and different for email and submit button. So for firstName and lastName will have same id value and for email and submit button, will have different id value.

Result:

Batching:

• Batching for fewer renders. Groups multiple state updates into a single re-render for better performance.
• With below demo, auto batching applied due to react 18 upgrade. You can check the console log where having one time render only, even I have two state update on button click inside promise.
• But, if you want to load/render on each state update then you can use "flushSync". Refer below second demo.
• One time render was already there but simple button click event, you can refer below third demo. With react 18 now it enabled even inside promise, settimeout etc.

Demo 1:

Result:

Demo 2: use flushSync to avoid batching:

Result:

Suspense:

• "Suspense" give you option to partially load UI instead of waiting for complete content to fetch and load.
• We were already doing this by controlling/writing-code self like checking fetch/load endpoint status(refer "ListItems+Batching" menu for this).
• But now we can simply use "Suspense" for that loading component and it will do all for you.
• With this example, I have some static content as you can see on the same page along with below section it is actually fetching endpoint to load list.
• With Suspense, its easy to manage at one place with less line of code.

After few second, content loaded:

To use "Suspense" in code, refer below:

We simply need to put data fetching/loading component inside Suspense with fallback.

Concurrent Rending, useTransition():

• Sometimes, small actions like clicking a button or typing into an input can cause a lot to happen on screen. This can cause the page to freeze or hang while all of the work is being done. This new API improve user interactions by marking specific updates as “transitions”. Provide visual feedback during a state transition and keep the browser responsive while a transition is happening.
• With below demo, without using "startTransition()", on button click, list will be reloaded and for moment you will see empty area in place of list items.
• But if you will use "startTransition()", then it will show previous list items until it pull new content on button click.
• useTransition() also provide isPending prop and value is true while the transition is pending and this allowing you to show an inline spinner.

Demo: with startTransition(), where I am loading endpoint data into set state and then same state sending to list component to render content along with isPending prop.

Result: as I have used "startTransition()", so my list area still show items and background is yellow because of isPending until it finish the rendering:

Now with this same example, if I just remove "useTransition()" from button click, then on button click, for moment, list area will show empty:

One more relevant use I found by using "startTransition()" or "useDeferredValue()". You will find less no. of times data fetch and rending. Like with below example, I have input change event on textbox search, so that means on each character typing, it go for fetch api call and render UI:

Now with this same example, I created new state prop for filter value and passed that for search filter and this help to avoid having rendering on each character input:

useAsyncExternalStore():

• useAsyncExternalStore is replacement of (useMutableSource)
• Due to concurrent rendering, any subscription based event/store, we should use "useAsyncExternalStore()" to sync Realtime value.

Demo:

React 18 Installation:

• Currently as on today(21-Dec02021), React 18 is available RC(Release to Candidate) and hopping by early next year(may be Jan 2022), this will be available as release to Public. You can find more about release plan discussion with: https://github.com/reactwg/react-18/discussions/9
• To use react 18 RC with your existing app, use below command to update:

npm install react@rc react-dom@rc

• Post this, your need to replace index.jx DOM render to concurrent mode i.e.: