CODEWITHSUNDEEP
javascriptreactjs
SnNaCk
SnNaCk

Reputation: 2950

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

I get this error every time I create a new React app:

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

How can I fix it?

I created my React app using:

npx create-react-app my-app

Upvotes: 264

Views: 472036

Answers (15)

GMKHussain
GMKHussain

Reputation: 4691

It can be solved by upgrading to v14.

In an older version we experienced an issue.

Just install the latest version:

npm i @testing-library/react@latest

Upvotes: 3

heetboda10
heetboda10

Reputation: 99

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();

Upvotes: 8

4l3x1
4l3x1

Reputation: 4294

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();

For TypeScript

Credit from comment section below answer: Kibonge Murphy

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") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Upvotes: 427

christian_js
christian_js

Reputation: 428

The legacy root API with ReactDOM.render has been deprecated in React 18 and replaced with a new root API using createRoot. The root of your app is the top-level DOM element that contains all of your rendered components, and is usually a <div> with an ID of root.

React 18 still has support for ReactDOM.render so you technically aren't required to update, but you can't be sure how long this support will last.

You can find a lot more information on the difference between ReactDOM.render and createRoot at https://thelonecoder.dev/javascript/react-js/reactdom-render-vs-createroot/.

To update to the new root API, change your index.js file to something like the following:

import { createRoot } from 'react-dom/client';
import App from './App';

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

Upvotes: 13

Ballpin
Ballpin

Reputation: 227

In React 18. For those that are using custom Webpack configurations, follow React Refresh Webpack Plugin. They have some HMR built in.

We are supposed to use fast refresh that has been developed by the React team.

It resolved that error message for me.

Upvotes: 1

Zaki Rashid
Zaki Rashid

Reputation: 49

Use:

import React, { useEffect } from "react";
import { createRoot } from "react-dom/client";

const App: React.FC<{}> = () => {
  useEffect(() => {
    fetchOpenWeatherData("Toronto")
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <img src="icon.png" />
    </div>
  );
};

const rootEl = document.createElement("div");
document.body.appendChild(rootEl);
const root = createRoot(rootEl);
root.render(<App />);

Upvotes: 0

QRrabbit
QRrabbit

Reputation: 337

To provide more or less an equivalent to prior versions of React, I use this slightly condensed version of the above, still surrounding the <App> with the <React.StrictMode>.

Another reason I condense this is that - in my specific pipeline - I never need to access the root variable, consequently, chaining statements together makes more sense to me, and the whole file is just five lines of code:

import React from 'react';
import ReactDOM from "react-dom/client";

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

    ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);

(P.S.: Don't forget if you need the webvitals functionality to also add to the above code)

Finally, I save this starter code as a Live Template using the WebStorm IDE. Depending on your IDE your snippets may be called differently, but the idea should be similar.

Upvotes: 7

Md Khairul Islam
Md Khairul Islam

Reputation: 461

import React, {createRoot} from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";


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

Upvotes: 0

JohnPix
JohnPix

Reputation: 1843

Instead of:

import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

Use:

import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

More details here

Upvotes: 44

Md. Abu Bakkar Siddiq
Md. Abu Bakkar Siddiq

Reputation: 187

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();

Upvotes: 18

Manish Bhusal
Manish Bhusal

Reputation: 121

In your index.js file:

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

Use this before React version 18

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

Use this in React version 18

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

Upvotes: 5

Dylan L.
Dylan L.

Reputation: 1317

As your error states, ReactDOM.render is no longer supported. So use the new createRoot.

As you can see from the code below, (which was pulled from the documentation) all you have to do is replace ReactDOM.render with createRoot.

// 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" />);

Upvotes: 6

Saha Anik
Saha Anik

Reputation: 41

If your application is using React-Router, then the following code will work fine:

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

It will work perfectly (with react-router).

Upvotes: 4

Drew Reese
Drew Reese

Reputation: 202979

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>
);

Upvotes: 65

user18647801
user18647801

Reputation: 39

This should do it:

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

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

Upvotes: 3

Related Questions