React version 18

New React version is out and with it come new possibilities. React version 18 or React v18 comes with the promise of support for concurrency in React and with that also come a couple of new hooks . But for all of this to work, you will need the latest versions of React.

What this new fweuters are, how to install and use React JS 18 and even how to upgrade existing project from React v17 to React v18 is the subject of this blog post.

Table of content

What is new in React 18
React create root method
React 18 new Hooks
React useId hook
React startStransition and useTransition Hooks
React useDeferredValue hook
React useSyncExternalStore
React useInsertionEffect
How to Update React from v17 to v18
How to instal react v18
How to implement react createRoot method
How to instal and Run React V18

What is Concurrent React?

Concurrency in react could be on of the most important additions to React 18 for a log time.

Concurrency is a 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. React uses priority queues and multiple buffering.

What new in React v18

New Client and Server Rendering APIs

Rendering on the client and server are a bit different and you will need to make some simple changes in order for them to work in you projects. These changes will allow you to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.

React DOM Client

In order to export new APIs , you will need to export them from react-dom/client

createRoot – New method to create a root to render or unmount. Use it instead of ReactDOM.render. New features in React 18 don’t work without it.
hydrateRoot – New method to hydrate a server rendered application. Use it instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs. New features in React 18 don’t work without it.