Upgrade to react 18 from react 17

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.