React 18 is the latest in a long line of major releases of React. With it you gain access to: new features for Suspense, new useId, useSyncExternalStore, and useDeferredValue hooks, as well as the new startTransition API.
While React 18 is not yet a stable release, testing out your application can be useful.
Like with previous major releases of React, React 18 is a fairly easy migration for most apps.
Outside of those considerations, let’s upgrade!
First, start by installing React 18:
npm i email@example.com firstname.lastname@example.org
Or, if you use
yarn add email@example.com firstname.lastname@example.org
If you’re using Create React App, you may also want to upgrade to the newest v5 as well using:
npm i react-scripts@5
yarn add react-scripts@5
Then, make sure to upgrade any dependencies that might rely on React.
After you install React 18, you may receive an error when your app is running:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
This is because previously, in React 17 and before, you’d have a file - usually called
index.ts - that included the following code:
const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);
While this code will continue to function for this release, it will not allow you to leverage most of the new features of React 18. Further, it’ll be removed in a future release of React.
To fix this issue, replace this code with the following:
const rootElement = document.getElementById("root");ReactDOM.createRoot(rootElement).render(<App />);
When finished, you should be able to verify the version of React you’re using with
An embedded webpage:Java | CoderPad
As promised, the update to React 18 is fairly straightforward! Most applications should be able to upgrade without too many problems.
If you run into issues during your migration and you’re using
StrictMode, try temporarily removing it to see if you run into any issues. React 18 introduced some changes that may impact some apps.
We hope you enjoy the new React concurrent features and happy hacking!