Upgrade React 18 from React 17One 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 firstI 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.tsxYou 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.