How to Fix "Deprecation notice: ReactDOM.render is no longer supported in React 18"?

javascript

To fix the "Deprecation notice: ReactDOM.render is no longer supported in React 18" warning, you need to replace all instances of ReactDOM.render() with React.render().

Here are the steps you can follow to fix the warning:

1. In your codebase, look for all instances of ReactDOM.render().
2. Replace them with React.render().
3. Verify that your code still works as expected.
4. Run all tests to ensure that the changes haven't introduced any new issues.

Alternatively, you can also use the new root API syntax, which is the recommended way of rendering components in React 18.

Here's an example of how to use the new root API syntax:

import {createRoot} from 'react-dom';

const app = (
  <div>
    <h1>Hello world!</h1>
  </div>
);

createRoot(document.getElementById('root')).render(app);

Note: The new root API syntax is only available in React 18. If you're using an earlier version of React, you'll need to upgrade first before you can use the new syntax.

Latest Questions