Top Features Coming in React 18
Now you are thinking that this new version may come up with major changes and you have to learn a lot of new things so it is not true. The React team has created a working group to make a community for adoption of new features in React 18 gradually by receiving multiple feedbacks and implementing them. So let’s get started with features added in React 18 Alpha.
Now let’s understand some of the new features in React 18.
1. Concurrency: Concurrency is the ability to execute multiple tasks simultaneously. Let’s consider that a user is clicking or typing in a React component and at the same time an animation is playing in a component in another React component. Here, the animation is rendered within the context of React while the user is typing or clicking the buttons.
Now in the previous versions, React was managing all these hook calls, function calls, etc. at the same time so the user was feeling that the app was stocking. To solve this issue, a dispatcher was there whose main task is to invoke and prioritize these callbacks. But now the React team is providing the Transition API by which React is getting some control of this event loop to the user
2. Transition API: As discussed in the above point, the Transition API is providing control over concurrency. startTransition API allows developers to point to React which actions may block the thread and cause lag on screen. Similarly React is providing a new hook known as useTransition. It will be very helpful in showing the loader when the transition is pending. So if you are wondering when you should Transition API so the answer is wherever you find render-blocking processes or network calls try to use these.
Here, in order to break down your app into smaller independent units you can use the Suspense API. There are 4 steps included in Server-Side Rendering which will be followed by the Suspense API independently which will not block the remaining app.
- Data is fetched for each component on the server.
- Entire app rendered to HTML before sending to client on the server.
4. Automatic Batching: Batching simply means to group together all the state updates into one render. In React 17 and earlier respond with batch re-render updates during the browser event as a click. React 17 will not collect redistribution if you need to download data and update their state. With reaction 18 if you use the new root API all state updates will be automatically updated whenever they happen. Also, promises, timeouts, or other event handlers will also take advantage of that. It will do state updates regardless of where it occurs. It will surely lead to better performance of our application.
5. The New Root API: Before React 18 inside the reactDOM.render method, we use to pass the main App component and then using document.getElementById we were using our root element that exists inside index.html. So what we were actually doing was rendering the app component into the root element of the page. But now we first have to create the root using the createRoot method which is being passed in the root element and then we call root.render to pass the app component.