# How to Upgrade to React 18

DevFeed: [How to Upgrade to React 18](<https://devfeed.tech/articles/how-to-upgrade-to-react-18-22346.md>)

Original publisher: [Read original article](<https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html>)

Published: 2022-03-08T00:00:00Z

Content type: tutorial

Language: en

Sources: [React](<https://devfeed.tech/sources/react.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [upgrade](<https://devfeed.tech/topics/upgrade.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Streaming](<https://devfeed.tech/topics/streaming.md>), [React Native](<https://devfeed.tech/topics/react-native.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [code](<https://devfeed.tech/tags/code.md>), [deprecated](<https://devfeed.tech/tags/deprecated.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [install](<https://devfeed.tech/tags/install.md>), [migration](<https://devfeed.tech/tags/migration.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>), [react-native](<https://devfeed.tech/tags/react-native.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [streaming](<https://devfeed.tech/tags/streaming.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [upgrade](<https://devfeed.tech/tags/upgrade.md>)

## AI overview

This React blog article guides developers through upgrading existing applications to React 18. It covers installation, the new createRoot API, changes to client rendering and unmounting, server-side rendering and streaming APIs, TypeScript dependency updates, and an automated migration script.

## Source excerpt

This blog site has been archived. Go to react.dev/blog to see the recent posts. As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. Please report any issues you encounter while upgrading to React 18. Note for React Native users: React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the React Conf keynote here. Installing To install the latest version of React: npm install react react-dom Or if you're using yarn: yarn add react react-dom Updates to Client Rendering APIs When you first install React 18, you will see a warning in the console: 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 React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. // Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(<App tab="home" />, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); // createRoot(container!) if you use TypeScript root.render(<App tab="home" />); We've also changed unmountComponentAtNode to root.unmount: // Before unmountComponentAtNode(container); // After root.unmount(); We've also removed the callback from render, since it usually does not have the expected result when using Suspense: // Before const container = document.getElementById('app'); render(<App tab="home" />,