Browsers are always designed and upgraded so that users can use them most conveniently. However, this is also the reason why browsers often have unsupported / version incompatibility errors.

In this article, if you are facing the following error: “ReactDOM.render is no longer supported in React 18. Use createRoot instead“. Continue to follow our article below to find out the causes and how to deal with them.

How does the error “ReactDOM.render is no longer supported in React 18. Use createRoot instead” happen?

This is a common error for those who are using earlier versions of React. In case you are launching the command and encounter this message:

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

That means you are already facing the error we mentioned above. However, you do not need to worry, we will help you solve it.

What causes error?

In general, the main cause of the above error is that subsequent updates of React do not support previous versions anymore, so many functions may no longer be compatible. Specifically in this case ReactDOM.render is no longer supported if you are using React 18.

How to fix it?

To resolve this error you will need to modify your code. Here are some of the ways we come up with it. Follow along and choose the method that works best for you.

Method 1: Use createRoot instead of ReactDOM.render

If you are using React version 18 and run a program that looks like this:

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

so, it is very easy to handle the above error. that is you just need to run a new createRoot instead of using the deprecated ReactDOM.render. The program after adjustment will be as follows:

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

Method 2: Update the index.js file

With this method, you will modify the code so that it is compatible with the syntax in React 18. Here is the sample code:

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

Method 3: Declare BrowserRouter into the program

In addition to the above ways, you can also run the following program to fix the error:

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

Method 4: Use render() and contain in <React.StrictMode>

On the other hand, you can run the code below:

import ReactDOM from "react-dom/client";
const element = document.getElementById("root");
 // Tell React to take control of that element
// In TYPESCRIPT since there is a bug, you need to add "!" element!
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848
const root = ReactDOM.createRoot(element!);
const App = () => {
  return (
   <React.StrictMode>
    <div>
      <h1>Hello world!</h1>
    </div>
   </React.StrictMode>
  );
};
root.render(<App />);

Conclusion

We hope you enjoyed our article about fixing the error “ReactDOM.render is no longer supported in React 18. Use createRoot instead”. ITtutoria are confident that with this information, you will be able to make the best method of your own and get the relevant information about this topic. If you are still having any problems with your subjects, please feel free to leave us a comment. Thank you for reading!