React 18 – What’s New, How to Install and Use, How to update ?

Web Development

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.

How to install and use v18

To install the latest version of React:


How to update projects v17-v18

Change you need to make to your index.js file

Video for this post

New Hook`s

  • useId
  • startTransition and useTransition
  • useDeferredValue
  • useSyncExternalStore
  • useInsertionEffect

More documentation

React v18

GitHub Repo

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.