Menu
why this happened? Warning: render(): Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup.
<section id="container-wrapper">
<div data-reactid=".0.1.0.1">
loading.....
</div>
</section>
// App.js
ReactDOM.render(<App routes={routes} /> , document.getElementById('container-wrapper'));
370
The render() method of the react-dom package is considered legacy starting react-dom version 18. The method is replaced with the createRoot() method that is exported from react-dom/client . The createRoot() method takes the root element as a parameter and creates a React 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.
The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application. To disable the yellow box place console. disableYellowBox = true; anywhere in your application.
1. Memoization using useMemo() and UseCallback() Hooks. Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
I ran into this issue rendering markup server-side. If you have something like this (ejs example):
<div id="app">
<%- markup %>
</div>
Try removing all surrounding white space. The following got rid of the warning in my case.
<div id="app"><%- markup %></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
