React 18ではReactDOM.renderではなくcreateRootを使う

React 18ではcreateRootを使う

2022年3月29日にReact 18がリリースされたのだが、バージョン18になってもReactDOM.renderを使用しているコードを見かけることがある。

React 18からはReactDOM.renderはサポートされておらずcreateRootを使うことが推奨されているので、現在はReactDOM.renderでもレンダリングされますが、ConsoleでWarningが表示されるので使用は避けたほうが良いです。

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

React 17での書き方

import ReactDOM from 'react-dom'
import { App } from './App'

ReactDOM.render(<App />, document.getElementById('root'))

React 18での書き方

import ReactDOM from 'react-dom/client'
import { App } from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

ReactDomはcreateRootとhydrateRootを含むが、hydrateRootのほうは使用しないことが多いのでcreateRootだけimportすれば良いケースが多いです。

import { createRoot } from 'react-dom/client'
import { App } from './App'
const root = createRoot(document.getElementById('root'))
root.render(<App />)