Breaking News: Grepper is joining You.com. Read the official announcement!

ReactDOM.render is no longer supported in React 18

Add Answer

Gorgeous Gazelle answered on April 1, 2022 Popularity 10/10 Helpfulness 7/10

answer ReactDOM.render is no longer supported in React 18

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

related ReactDOM.render is no longer supported in React 18

related Warning: ReactDOM.render is no longer supported in React 18.

ReactDOM.render is no longer supported in React 18

Comment

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

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: itsjavascript.com

Tags: javascript react-18

Link to this answer
Share Copy Link

Contributed on Apr 01 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

Closely Related Answers

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

Comment

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


For typescript go with the below:

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

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 26 2022

Bad Buzzard

0 Answers Avg Quality 2/10

ReactDOM.render is no longer supported in React 18

Comment

import * as ReactDOMClient from 'react-dom/client';
import App from 'App';

const container = document.getElementById('app');

// Create a root.
const root = ReactDOMClient.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab="profile" />);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 05 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

ReactDOM.render is no longer supported in React 18

Comment

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// Initial render.
ReactDOM.render(<App tab="home" />, container);

// During an update, React would access
// the root of the DOM element.
ReactDOM.render(<App tab="profile" />, container);

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 01 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

Warning: ReactDOM.render is no longer supported in React 18.

Comment

import { createRoot } from 'react-dom';

// Example component to render
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

// Find the root element in the DOM
const rootElement = document.getElementById('root');

// Use createRoot() to render the component onto the DOM
createRoot(rootElement).render(<App />);

Popularity 4/10 Helpfulness 2/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

ReactDOM.render is no longer supported in React 18

Contents

More Related Answers

ReactDOM.render is no longer supported in React 18

Closely Related Answers

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

ReactDOM.render is no longer supported in React 18

ReactDOM.render is no longer supported in React 18

Warning: ReactDOM.render is no longer supported in React 18.

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.