An Interest In:
Web News this Week
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
Some of Our Sources
- Pearsonified
- Spoon Graphics
- Smashing Magazine
- Vandelay Design
- Creative Curio
- Web Designer Depot
- Noupe
- 24 Ways
- Stylized Web
- Spyre Studios
Help Webnuz
Referal links:
ReactDOM.render is no longer supported in React 18.
ReactDom.render is no longer supported in React latest update 18.0.0. UsecreateRoot instead untill you switch to the new API, your app will behave as it it's running React 17.
If you will try to run the ReactDom.render in index.js
then you will get warning like this.
A better alternative of this warning is change your dependency version of react and react-dom to some older version like 17.0.2 or some other which is better for you and for your project in package.json file inside the your project
or else you can use different method as well.
To solve the error, create a root element and use the ReactDOMClient.render method instead.
Make sure you are changing the index.js file
import {StrictMode} from 'react';import ReactDOM from 'react-dom';import App from './App';// 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.ReactDOM.render( // deprecated starting React 18 <StrictMode> <App /> </StrictMode>, document.getElementById('root'),);To solve the error, create a root element and use the ReactDOMClient.render method instead.
import {StrictMode} from 'react';import {createRoot} from 'react-dom/client';import App from './App';// IMPORTANT: use correct ID of your root element// this is the ID of the div in your index.html fileconst rootElement = document.getElementById('root');const root = createRoot(rootElement);// if you use TypeScript, add non-null (!) assertion operator// const root = createRoot(rootElement!);root.render( <StrictMode> <App /> </StrictMode>,);Let's see what's new in this React!!
React 18 introduces a new root API which provides better tools for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
// Beforeimport { render } from 'react-dom';const container = document.getElementById('app');render(<App tab="home" />, container);// Afterimport { createRoot } from 'react-dom/client';const container = document.getElementById('app');const root = createRoot(container); // createRoot(container!) if you use TypeScriptroot.render(<App tab="home" />);for more information plase visit it's official website:
Reactjs
Original Link: https://dev.to/abhishek_159/reactdomrender-is-no-longer-supported-in-react-18-1kac
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To