【React】Warning: ReactDOM.render is no longer supported in React 18.が出た時

【React】Warning: ReactDOM.render is no longer supported in React 18.が出た時

結論

  • create-react-appで自動生成されるコードがReact18に一部対応していないのが原因
  • src/index.jsxの記述をReact18に対応した書き方に変更してあげればOK

状況

  • create-react-appでReactアプリの作成
  • ある程度実装して、、、
  • ブラウザからdeveloper toolを使用すると、コンソール画面に以下のような警告
コード
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
  • 警告の対象はcreate-react-appで自動生成された以下のコード
src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

解決方法

  • src/index.jsxを以下のように修正
コード
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = createRoot(container);
root.render();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Leave a Reply

Your email address will not be published.

CAPTCHA