
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 />)