React 18で新しく導入された変更により、従来の`ReactDOM.render`メソッドが非推奨となり、このエラーが発生するようになりました。このエラーは、React 18にアップグレードした後によく見られます。幸いにも、解決方法は比較的簡単です。

エラーの原因

React 18では、アプリケーションのルートレベルでの描画方法が変更されました。`ReactDOM.render`の代わりに、新しい`ReactDOM.createRoot`APIを使用することが推奨されています。この変更は、React 18の新機能である並行レンダリング（Concurrent Rendering）をサポートするために行われました。

解決方法

このエラーを解決するには、以下の手順に従ってコードを修正します：

1. まず、アプリケーションのエントリーポイント（通常は`index.js`または`index.tsx`）を開きます。

2. 既存の`ReactDOM.render`呼び出しを以下のように変更します：

// 古いコード
ReactDOM.render(<App />, document.getElementById('root'));

// 新しいコード
import { createRoot } from 'react-dom/client';

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

3. 必要に応じて、`react-dom`からのインポートを更新します：

// 古いインポート
import ReactDOM from 'react-dom';

// 新しいインポート
import { createRoot } from 'react-dom/client';

注意点

  • この変更を行う際、アプリケーション内の他の部分で`ReactDOM.render`を使用している箇所がないか確認してください。
  • `StrictMode`を使用している場合は、`createRoot`の呼び出し後に`root.render`内で``を使用できます。
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

まとめ

React 18への移行は、アプリケーションのパフォーマンスと機能を向上させる重要なステップです。`ReactDOM.render`から`createRoot`への移行は、この過程の一部であり、新しい並行レンダリング機能を活用するための準備となります。

この変更を適用することで、"ReactDOM.render is no longer supported in React 18"エラーを解決し、最新のReact機能を利用できるようになります。アプリケーションの他の部分との互換性を確認し、必要に応じて追加の調整を行うことをお忘れなく。

React 18の新機能について詳しく知りたい方は、公式ドキュメントを参照することをおすすめします。新しいAPIと機能を理解することで、よりモダンで効率的なReactアプリケーションの開発が可能になります。