We Are Going To Discuss About Deprecation notice: ReactDOM.render is no longer supported in React 18. So lets Start this ReactJs Article.
Deprecation notice: ReactDOM.render is no longer supported in React 18
- [Solved] Deprecation notice: ReactDOM.render is no longer supported in React 18
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. - Deprecation notice: ReactDOM.render is no longer supported in React 18
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.
Solution 1
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();
Original Author 4l3x1 Of This Content
Solution 2
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
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>
);
Original Author Drew Reese Of This Content
Solution 3
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();
Original Author heetboda10 Of This Content
Solution 4
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();
Original Author Md. Abu Bakkar Siddiq Of This Content
Conclusion
So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.