CreateReactAppでReact 18によるエラー対処

React学習してたらコンソールログにずっと出ているエラー分を調べてみたら、意外とつまづきそうな内容だったのでメモメモ。

概要

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

ReactDOM.render は、React 18 でサポートされなくなりました。代わりにcreateRootを使用してください。新しい API に切り替えるまで、アプリは React 17 を実行しているかのように動作します。詳細はこちら: https://reactjs.org/link/switch-to-createroot

CreateReactAppで自動生成されるコードがReact 18に対応していないために表示されているWarningだそうです。

対処方法

対処方法は簡単でした。以下のコードに書き換えるのみです。

src/index.js

import React from 'react';
- import ReactDOM from "react-dom";
+ import { createRoot } from 'react-dom/client';
import { App } from './App';

- ReactDOM.render(<App />, document.getElementById("root"));
+ const container = document.getElementById('root');
+ const root = createRoot(container);
+ root.render(<App />);

参考サイト

最後に

一つ一つ覚えることが積み重なっていますが、まだまだ覚えることが多いのでReactです！これからも記事にしてアプトプット増やしていこうと思います！