今更の React 18 ReactDOM の render の使い方が変わった

React のアプリを出力する render の方法が React v18 からは変更になっています

React v18 からは `createRoot` を使ってアプリを出力する root になるオブジェクトを作成する必要がある

Before

import ReactDOM from 'react-dom';
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

After (React v18)

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

import するのも react-dom から react-dom/client に変更になっているので注意

TypeScript を使う場合は document.getElementById('app') が undefined になる可能性があるとして警告が出るので ! (Non-Null Assertion Operator) を使うと良い

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

ReactDOM の変更に伴い SSR 時の API も色々変更になっているが、公式の Upgrade Guide 書かれているので深くは追わない

次からは <Suspense> とかの新機能をみていきたい
おわり。

[参考]

レンダ…