React 18 displays ReactDOM.render warning even though I switched to the new standard

Question

I have switched to React 18 and followed official guide on how to change root's render method.

Here is my root's render code:

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

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

Both react and react-dom are ^18.0.0.

App is throwing this:

Answer 1

By simply refactoring, the line of code below will also work

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

Answer 2

Have you installed type definitions for react and react-dom packages? You need to add @types/react and @types/react-dom packages and set them in the tsconfig.json file. Keep in mind, package versions needs to be compatible. Also the expected parameter type of the createRoot method is Element | DocumentFragment so you can either use exclamation mark or type assertion like as Element.

index.tsx

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

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

tsconfig.json

"types": ["react", "react-dom"]

package.json

"dependencies": {
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.3"
  },
"devDependencies": {
    "@types/react": "18.0.0",
    "@types/react-dom": "18.0.0",
    "typescript": "4.4.2"
  },

Answer 3

You can ignore it, https://github.com/facebook/react/issues/24292#issuecomment-1091690844

A fix has already been merged, but UNPKG does not yet serve the version which has the fix included. Author: 0stone0

Reference: react@18 in "standalone" mode and get a warning using createRoot