React JS 18 New Features
If you have a React Dev, you have heard that the React team has released version 18 alpha. React 18 is primarily intended at making the UI more performant by introducing box features and improvements. Let’s see the new features of React JS 18.
1. Root API:
Priority to React18, we would use the render method from the react-dom method package to render our react component tree.
In version 18 though you will use the new create root method. To create the root and then callrender on that render root. The difference is in the internals of how to react works. But from our point of view, it is introduced to make the transition into react 18 smoother. You can use the legacy API of “ReactDOM.render()” but you will see a warning that it has been deprecated and asking you to switch to the new create root API. So, this is the first change you will notice.
2. Automatic Batching
Batching refers to grouping multiple state updates into a single re-render for better performance. For example, if you have two state updates inside a click handler, react will batch these into one re-render. Even though, there were two state updates. However, with react 17, there was no consistency in the batch updates. For example, if you fetch within this click handler and then update the state twice, React would not batch the updates.
In react 18 though with the help of the create root API, react will automatically batch all updates with respect to where they originate from. So, updates inside timeouts, promises, event handlers, or any other event will patch the same way, this will result in less re-rendering and therefore better performance.
Now if you are some reason, you want to opt out of automatic batching, you can make use of the “flushSync()” method from the react-dom package. See the example below, the dom updates twice in the clickhandler.
3. StartTransition API:
This API improves user interaction by marking specific updates as transitions.
For ex, Consider typing in an input field that filters a list of data. When the user type in the input field there are two things happening, first you’re storing the value of the input field in the state variable to reflect what the user is typing and second, there is the filtering of the list happening in the background based on the text that is being typed. Now based on the size of the list, simply typing into the input field can cause a log on the page while everything renders making typing or other interactions feel slow and unresponsive.
The new startTransition API solves this issue by giving the ability to mark updates as transitions. Now we can classify state updates into two categories, the first is urgent updates, which reflect direct reflection like typing, clicking, etc. In our example, updating the input filter value as user types is important and can be marked as urgent.
The second category is the transitions updates, which reflect transitions in the UI from one view to another. In our example, filtering the list is not so urgent and hence can be marked as a transition.
