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.
In order to export new APIs , you will need to export them from react-dom/client
- createRoot – New method to create a root to
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.hydratein 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
- startTransition and useTransition