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
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")!);
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
- 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.