React 18: New Features

React 18: New Features

React 18: New Features

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. React js is a modern library among developers for creating interactive UI.

And now react has come up with React 18. Since its launch, React 18 has become much more stable and has been explored by developers.

To upgrade React 18  following steps are required.

To install the latest version of React:

npm install react react-dom

       Or

yarn add react react-dom 

React 18 helps in the better management of roots with the introduction of a new root API. In addition, the concurrent renderer feature in the new root API allows you to opt into the concurrent features.

Let’s have a look at the React 18 features

1.Concurrent React

React can prepare numerous UI versions at once because to concurrency. Rendering is interruptible in React 18, an essential property of Concurrent React. 

React may begin producing an update in a concurrent render, halt in the midst, and resume rendering later. Even if a render is stopped, it may even abandon an ongoing render, but the user interface will still be consistent. To perform this task, first, the entire tree is evaluated, and then the DOM mutation is performed in the end. Due to this feature, React may create new screens in the background without interrupting the main thread.

2.Automatic Batching

In React 17, state updates used to happen in the batch process; for example, if there are multiple components whose state changes on refresh or component re-render, the render occurs only once. Therefore any state updates made outside of event handlers resulted in a re-render. This had lots of impact on the performance.

For ex:

const onAdd = () => {

 setName(Jack);

 setAge(20);

}

On the call, this function render happens once for changing the state of both Name and Age.

But this is the case for state updates in promises, native events, or outside React event handlers; ex, if we are using functions like setTimeOut or calling an API like fetch API, the render happens for each state update.

const onAdd = () => {

 setTimeout(() => {

  setName(Jack);

setAge(20);

})

}

React 18 enables batching of all state updates. In addition, it re-renders the page after all state-updates, thus enhancing performance.

Note- it has enabled the feature to stop automatic batching using the flushSync() API.

3.Suspense Feature

Suspense in React allows the developers to hold or pause the render of the component until a given condition is met, with a fallback option

Ex:

function ProfilePage() {

  return (

    <Suspense fallback={<h1>Loading profile…</h1>}>

      <ProfileDetails />

      <Suspense fallback={<h1>Loading posts…</h1>}>

        <ProfileTimeline />

      </Suspense>

    </Suspense>

  );

}

In this example, we are using <h1> text as fallback option, but it can be replaced with Spinner or other options.

This helps developers from escaping any additional code for the waiting period on the screen before the actual loading of the element.

New Client and Server Rendering APIs

React DOM Server

These new APIs are now exported from react-dom/server and have full support for streaming Suspense on the server using renderToPipeableStream and renderToReadableStream.

New Hooks

USERID is a new hook that generates unique IDs.Multiple accessibility APIs require unique IDs; USERID can be helpful for component libraries integrating with these APIs.

This id is unique for the entire application and can be appended with a prefix or suffix to generate multiple unique ids.

useTransition

useTransition lets you mark some state updates that are not urgent. 

This hook returns the transition state and a function to start the transition.

const [isPending, startTransition] = useTransition();

React will allow urgent state updates as click event and press event to occur on priority, and then the transition update occurs.

useDeferredValue

Rendering of a part in React can be urgent and non-urgent. With the use of useDeferredValue, re-rendering a non-urgent part of DOM tree can be deferred. Though similar to debouncing, It has a few advantages compared to it. Since there is no way to provide a specific time delay, deferred rendering is reAttempted after the first render appears on the screen. The user input doesn’t get blocked, as the default rendering process is completely interruptible.

useSyncExternalStore

useSyncExternalStore is a new hook that allows reading and subscribing from external data sources. While implementing subscriptions to external data sources, it removes the need for useEffect. 

const state = useSyncExternalStore(subscribe, getsSnapshot[, getServerSnapshot]);

useInsertionEffect

useInsertionEffect is a new hook that allows CSS-in-Javascript libraries to address performance issues of injecting styles in render. This use effect fires synchronously after all DOM mutations. i.e., it is fired before useEffect.

The following Features have been Deprecated in the new release:

    • react-dom: ReactDOM.render 
    • react-dom: ReactDOM.hydrate
    • react-dom: ReactDOM.unmountComponentAtNode 
    • react-dom: ReactDOM.renderSubtreeIntoContainer 
    • react-dom/server: ReactDOMServer.renderToNodeStream 

Conclusion

React 18 sets the foundation for future releases and focuses on improving the user experience. React 18 introduced out-of-the-box improvements and new features like Automatic Batching or Concurrent Mode that enhance the performance of React. These changes are very gradual, too, and do not require you to change your existing knowledge base.

Explore more on Different hooks in react.

Summary
Article Name
React 18: New Features
Description
The user experience is the primary goal of React 18, which lays the groundwork for further releases. In addition, new features and enhancements were added with React 18.
Author
Publisher Name
BugendaiTech Pvt Ltd
Publisher Logo
Spread the updates
December 30, 2022
|

Leave a reply



Notice: Undefined index: position_on_screen in /home/tl2jq5v7asif/public_html/wp-content/plugins/mystickyelements/mystickyelements-front.php on line 203