ReactDOM.render is Deprecated — What It Means & How to Fix It

What Does This Error Mean?

React 18 deprecated ReactDOM.render() and replaced it with the new createRoot() API. If you see 'ReactDOM.render is no longer supported in React 18. Use createRoot instead.', your app is using the old API from React 17 or earlier. The fix is a small one-time change to your entry file (index.jsx or main.jsx) to use the new createRoot syntax. Your app will continue to work with the old API but runs in a legacy mode that disables React 18's concurrent rendering features.

Affected Models

React 17
React 18
React 19
Create React App
Next.js

Common Causes

The project was created with React 17 or earlier and upgraded to React 18 without updating the entry point
A tutorial or template used ReactDOM.render() from older React documentation
A third-party library or template initialized React using the deprecated API
The developer manually wrote the entry point following an older code example
The Create React App template was generated before React 18 was released

How to Fix It

Open your application's entry file. It is typically src/index.jsx, src/index.js, or src/main.jsx in a Create React App or Vite project.

This is the file where ReactDOM.render() is called — usually the very first React rendering statement in your entire app.
Change the import at the top of the file. Replace: import ReactDOM from 'react-dom'; with: import { createRoot } from 'react-dom/client';

The new API is in the 'react-dom/client' subpath, not the root 'react-dom' package.
Replace the ReactDOM.render() call with the new createRoot() syntax. Old code: ReactDOM.render(<App />, document.getElementById('root')); New code: const root = createRoot(document.getElementById('root')); root.render(<App />);

The behavior is identical from your components' perspective — this change only affects how React mounts to the DOM.
If you use StrictMode, keep it wrapped around <App /> as before. Example: root.render(<StrictMode><App /></StrictMode>);

React StrictMode is recommended in development — keep it in place to catch potential issues with concurrent rendering.
Save and verify the warning is gone. Run your app in development mode and check the browser console — the deprecation warning should no longer appear after the migration.

If you still see the warning, search your codebase for any other calls to ReactDOM.render() — sometimes it appears in test files or additional entry points.

When to Call a Professional

This is a simple one-line migration — no external help needed. The change takes under 2 minutes and does not affect your component code at all. Only the application entry point (index.jsx, index.js, or main.jsx) needs to be updated.

Frequently Asked Questions

Does my app break if I keep using ReactDOM.render in React 18?

No — your app will continue to work. React 18 with ReactDOM.render() runs in a legacy compatibility mode that mimics React 17 behavior. However, you lose all of React 18's new features: concurrent rendering, automatic batching, and the Suspense improvements. For a simple app, this may not matter immediately — but migrating now is the right thing to do before the API is eventually removed.

What new features does createRoot unlock in React 18?

createRoot enables React's concurrent rendering mode, which includes: automatic batching of state updates (fewer re-renders), the startTransition API for marking non-urgent updates, improved Suspense behavior for data fetching, and the new useDeferredValue and useTransition hooks. These features make React apps feel more responsive by allowing React to prioritize urgent updates (like typing) over slower ones (like data loading).

Does Next.js need this change?

No — if you are using Next.js, the framework handles React's root initialization internally. You do not write a ReactDOM.render() or createRoot() call yourself in a Next.js project. Next.js 13 and later already use React 18's createRoot automatically. This migration only applies to projects where you manually bootstrap React in an entry file.