[Fixed]ReactDOM.render is no longer supported in React 18

As we know React launched their new updated version that is React 18. React JS has major improvements and has new features with incredible improvements. The significant change is that ReactDOM is no longer supported. We have a solution on How to fix ReactDOM.render is no longer supported in React 18 Error.

After sifting from React 17 to React 18 some users are complaining that when they are trying run their react js project but unfortunately, they are facing an error.

The error code pop-up with the message:-

“Warning: ReactDOM.render is no longer supported in React 18. UseReactDOM.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. Learn more: https://reactjs.org/link/switch-to-createroot

What is ReactJs?

React is a JavaScript library for building user interfaces. Building single-page applications is utilized. It likewise permits clients to make reusable UI parts. Meta and an open-source developer community run it. In spite of the fact that React is a library instead of a language, it is broadly utilized in web development. The library initially showed up in May 2013 and is currently one of the most normally involved frontend libraries for web improvement.

React offers different extensions for whole application compositional help, like Flux and React Native, past simple UI.

Fix – ReactDOM.render is no longer supported in React 18 Error

To fix the error code: ReactDOM.render is no longer supported in React 18 Error If You Don’t have any desire to utilize React 18 Then Just downsize to respond 17 Just run this order in your terminal: npm install – save react@17.0.2 react-dom@17.0.2 Now, your error should be gone and your concern is tackled.

To Solve the error code: ReactDOM.render is no longer supported in React 18 Error As Per React 18 changelog.md they said react-dom: ReactDOM.render has been Utilizing it will caution and run your application in React 17 mode. According to reactjs.org React 18 presents another root API that gives better ergonomics to overseeing roots. The new root API additionally empowers the new simultaneous renderer, which permits you to select simultaneous highlights. Presently, Your mistake should be addressed.

A few methods are listed below follow the listed instructions one by one, this may help you in fixing this annoying error.

1. Updates to Client Rendering APIs.
2. Updates to Server Rendering APIs.
3. Updates to TypeScript definitions.
4. Updates to Strict Mode.
5. Dropping Support for Internet Explorer.
6. Automatic Batching.
7. Downgrade to React 17.
8. Summary Video.

1] Updates To Client Rendering APIs

Whenever you initially introduce React 18, you will see an admonition in the control center:

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. Learn more: https://reactjs.org/link/switch-to-createroot

React 18 presents another root API that gives better ergonomics to overseeing roots. The new root API likewise empowers the new simultaneous renderer, which permits you to select simultaneous highlights.

// 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); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

We’ve likewise changed unmountComponentAtNode to root.unmount:

// Before
unmountComponentAtNode(container);

// After
root.unmount();

We’ve additionally taken out the callback from render, since it typically doesn’t have the normal outcome while utilizing Suspense:

// Before
const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
  console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
  useEffect(() => {
    console.log('rendered');
  });

  return <App tab="home" />
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);

NOTE: There is no one-to-one substitution for the old render callback API – it relies upon your utilization case.

At long last, if your application utilizes server-side delivering with hydration, overhaul hydrate to hydrateRoot:

// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.

2] Updates To Server Rendering APIs

In this delivery, we’re patching up our react-dom/server APIs to help Suspense on the server and Streaming SSR completely. As a feature of these changes, we’re belittling the old Node streaming API, which doesn’t uphold steady Suspense spilling on the server.

Using this API will now warn:

Using this API will now warn

All things considered, for spilling in Node conditions, use:

renderToPipeableStream

We’re likewise acquainting another API with help streaming SSR with Suspense for current edge runtime conditions, like Deno and Cloudflare laborers:

renderToReadableStream

The accompanying APIs will keep working, yet with restricted help for Suspense:

renderToString

renderToStaticMarkup

At last, this API will keep on working for delivering messages:

renderToStaticNodeStream

3] Updates To TypeScript Definitions

Assuming your venture utilizes TypeScript, you should refresh your @types/react and @types/react-dom conditions to the most recent variants. The new kinds are more secure and get issues that used to be overlooked by the sort checker. The most prominent change is that the youngsters prop currently should be recorded unequivocally while characterizing props, for instance:

interface MyButtonProps {
  color: string;
  children?: React.ReactNode;
}

4] Updates To Strict Mode

Later on, we might want to add an element that permits React to add and eliminate areas of the UI while protecting the state. For example, when a client tabs from a screen and back, React ought to have the option to show the past screen right away. To do this, React would unmount and remount trees utilizing a similar part state as in the past.

This element will give React better execution out-of-the-container, yet expects parts to be tough to impact being mounted and annihilated on various occasions. Most impacts will work with next to no changes, yet a few impacts expect they are just mounted or annihilated once.

To assist with surfacing these issues, React 18 presents a new development-only check to Strict Mode. This new check will naturally unmount and remount each part, at whatever point a part mounts interestingly, reestablishing the past state on the subsequent mount.

Prior to this change, React would mount the part and make the impacts:

* React mounts the component.
    * Layout effects are created.
    * Effect effects are created.

With Strict Mode in React 18, React will recreate unmounting and remounting the part being developed mode:

* React mounts the component.
    * Layout effects are created.
    * Effect effects are created.
* React simulates unmounting the component.
    * Layout effects are destroyed.
    * Effects are destroyed.
* React simulates mounting the component with the previous state.
    * Layout effect setup code runs
    * Effect setup code runs

5] Dropping Support For Internet Explorer

In this update, React is dropping help for Internet Explorer, which is leaving support on June 15, 2022. We’re rolling out this improvement now on the grounds that new elements presented in React 18 are constructed utilizing current program highlights, for example, microtasks that can’t be enough polyfilled in IE.

On the off chance that you want to help Internet Explorer, we suggest you stay with React 17.

6] Automatic Batching

React 18 adds out-of-the-box execution upgrades by doing more grouping naturally. Clustering is when React bunches various state refreshes into a solitary re-render for better execution. Before React 18, we just bunched refreshes inside React occasion overseers. Refreshes within guarantees, setTimeout, local occasion overseers or some other occasion were not clumped in React naturally:

// Before React 18 only React events were batched

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

Beginning in React 18 with createRoot, all updates will be consequently grouped, regardless of where they start from. This implies that updates within breaks, guarantees, local occasion overseers, or some other occasion will group the same way as updates within React occasions:

// After React 18 updates inside of timeouts, promises,
// native event handlers or any other event are batched.

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

This is a breaking change, yet we anticipate that this should bring about less work delivery, and hence better execution in your applications. To quit programmed bunching, you can utilize flushSync:

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}

7] Downgrade To React 17

If You Don’t have any desire to utilize React 18 Then Just downsize to respond 17 Just run this order in your terminal.

npm install --save react@17.0.2 react-dom@17.0.2

Now, hope your error should be gone and your concern is tackled.

8] Summary Video

You may also face “this.InnerNativeModule.configureProps is not a function” Error. Check out the solution now.