Duc Mai

Full stack developer

2022-04-01

Upgrade to react 18 from react 17

Upgrade to react 18 from react 17

After React 18 is official I started upgrading several of my projects to the latest and here is my experience with the upgrade

Upgrade React 18 from React 17

One day after React 18 is official I was so excited to start exploring the new features and then I decided to upgrade the current code of my SplittaExpens app to the latest react. So here is my story of the upgrading

Update package.json first

I upgraded from React 17.0.2 and react-scripts 5.0.0. So here are the following dependencies I need to upgrade
  • @testing-library/jest-dom to 5.16.3
  • @testing-library/react to 12.1.4
  • @types/react to 17.0.43
  • @types/react-dom to 17.0.14
  • react to 18.0.0
  • react-dom to 18.0.0
  • react-router-dom to 6.3.0

I realized that react-spring 9.4.3 does not work with React 18 so I removed that for now

Update index.tsx

You need to update your rendering root to the new client so it will support the new features.
import * as ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<React.StrictMode><App /></React.StrictMode>);

What work well?

So far my app still works as it should and the feature I expect most is state updates will be batched automatically and it works as it should which is really nice.

What do not work?

I have problems with using the new hooks useTransition and useDeferredValue as typescript complaints about that it cannot find them in react. I am not sure it is problem of my editor or react is lacking definitions for them in typescript.
I have tried anyway useTransition and useDeferredValue in a new create-react-app with ts-nocheck
  • the useTransition gives an effect of non-blocking rendering as React described. I think this one I will use to update state that are not crucial. For example when I need to update data that is synced from other clients via socket.
  • the useDeferredValue does not work as I thought. The value comes out from useDeferredValue will have only a little lag with the original state. I might need to dig into this hook a little bit more

TLDR

  • Upgrading seems to be easy without many changes needed.
  • I like the improvement of automatic batching updates.
  • The new hooks do not exist in typescript for me.
ReactSplittaExpens

About me

How I describe about myself

A developer cares about climate changes and environments

A full stack js developer

A developer is interested in cloud technologies

A challenge lover

Language:

English, Swedish, Vietnamese

Email:
mrducvmv88@gmail.com
LinkedIn:
Duc Mai
Twitter:
Duke Mai
IndieHackers:
Duc Mai