[Solved] Deprecation notice: ReactDOM.render is no longer supported in React 18

In your file index.js, change to:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

React 18 shipped March 29th, 2022. ReactDOM.render has been deprecated in React 18 and currently issues a warning and runs in a compatible mode.

Deprecations

Deprecations

• react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
• react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
• react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
• react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
• react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.

To resolve it, you can either revert to a previous version of React or update your index.js file to align with the React 18 syntax.

Example:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

As you said, you created your React app using: npx create-react-app my-app.

• Your index.js must look like this after the command executes.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• Your code after edits mentioned in the console

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Before

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

After

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

Before in your index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

Change it like below into your index.js file:

import React from 'react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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


reportWebVitals();