All you have to know about React18
An Introduction to React
Do you work as a web developer?
If you answered yes, you should be aware that React.js is an open-source JavaScript library for creating user interfaces for single-page applications.
REACT V18.0
React v18.0 is a crucial new version of React released on March 8, 2022. It has numerous galvanic features and updates for the React.js development community. The great news is that it doesn’t break your existing code. So, what you learned still applies as well. You still write code the same way as before.
What’s New?
React 18 new features and refinements are possible thanks to the latest opt-in “concurrent rendering” mechanism in React 18 that enables React to create multiple versions of the UI at the same time. Though this change is mostly behind the scenes, it will unlock new possibilities to improve the app performance. — React document
Screenshot from React 18 Keynote slides.
So, let’s talk about React 18 latest features and updates.
Concurrency
The most crucial addition in React 18 is concurrency. I think this is basically true for developers, though the story may be a bit more complicated for library maintainers.
Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. — React document
In other words:
“ The latest concept & set of features (plus APIs) that support with state update categorization urgent state updates can be categorized over minor urgent, long taking obstructing updates ”
Concurrency is all about processing various simultaneous state updates.
React uses a heuristic to decide how “urgent” an update is, and lets you adjust it with a few lines of code so that you can achieve the desired user experience for every interaction.
New APIs
Now, you can enumerate react about state update that has lesser priority by using one of the new APIs introduced with React 18.
useTransition() & StartTransition() Hook
By default, all updates in React are considered urgent. That could create a complication when prompt updates are slowed down by dense updates.
However, starting React 18 and the new concurrency features, you can spot some updates as disreputable and non-urgent — so-called transitions. That’s basically useful with dense UI updates, like filtering bragging lists.
Wrap a state update with startTransition() to let React know that is possibly managed with lower priority.
State Update Batching
Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout , native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically.
Suspense in Data Frameworks
Suspense is not a data fetching library. It’s a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet. React can then wait for it to be ready and update the UI. — React document
What is Suspense?
It is a lower-level engine API that can be used to pause a component’s accomplishment. How is that done? In a nutshell, it all boils down to a component throwing a Promise that is deflected by the engine. It will defer the execution of that component’s tree until the Promise is resolved or rejected.
Suspense component
Lazy loading exclusively means that you implement code splitting to only load code for an irrefutable component when needed. It can help with performance since less code has to be downloaded initially. This is often used in combination with routing. For example, you already used a suspend component to show a fallback component, for example, a loading spinner until the code for the lazily loaded component was downloaded. However, before React 18, you couldn’t use the suspense component if you also used server-side rendering. Now, of course, many apps might not use that, but if you did use it, you would not be able to use the suspense component because it would cause an error. But React 18 enables Suspense for SSR. In addition, Suspense will also be usable for general data fetching (not just code splitting) in the future.
New Client and Server Rendering APIs
In the latest release of React 18, They redesign APIs and expose them for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.
React DOM Client
As they said latest APIs are now exported from react-dom/client:
createRoot is a New method to create a root to render or unmount. And used instead of ReactDOM.render.
hydrateRoot is a new method as well to hydrate a server-rendered application. Which is used instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs.
Note: New features in React 18 don’t work without it.
createRoot and hydrateRoot both accept a new option called onRecoverableError in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError, or console.error in the older browsers.
React DOM Server
These APIs are now exported from react-dom/server as well as react-dom/client and have full support for streaming Suspense on the server:
renderToPipeableStream is used for streaming in Node environments.
renderToReadableStream is used for modern edge runtime environments, such as Deno and Cloudflare workers.
According to ReactDocs.
The existing renderToString method keeps working but is discouraged.
How to Update?
Updating React 18 indeed is a piece of cake. Or you can say Updating is dreadfully easy and requires almost no work. You don’t need to re-learn React and don’t need to change your entire codebase. Installation instructions are the same.
All you have to do is to run:
- To install the latest version of React:
Install/Upgrade using NPM
Install/Upgrade using YARN
- After running that there’s one single change you have to make to your code base is that to take benefits of new features which unlocked and added by React 18 you have to go to your root entry file. Typically, index.js.
In index.js file replace the import of React DOM from React DOM
index.js
That’s all no other change is required. As I said before what you learned still applies as well you still write code the same way as you are before.
Top comments (0)