Bug: Multiple renderings in the same dom without being overwritten, all renders are displayed

[qluwlh]

In some cases, I need to render content multiple times in a DOM, and I expect the subsequent render to overwrite the previous content. However, in the code below, all the multiple render contents are displayed

React version: 18.2.0

Steps To Reproduce

1. index.js

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';
const dom = document.getElementById('root')

const render = (Comp)=> {
  createRoot(dom).render(Comp)
}
render(<App/>)
render(<App/>)

2. App.js

import { useState,useEffect } from 'react';

export default function App() {
  const [show,setShow] = useState(false)
  useEffect(()=> {
    setTimeout(()=>{
      setShow(true)
    },500)
  },[])
  if(!show){
    return <></>    //  I found that when this place returns a non empty value, this problem will not occur anymore
  }
  return (
    <>
      <h1>Hello, world!</h1>
      <Counter />
    </>
  );
}

The current behavior

The content of both renderings has been preserved

The expected behavior

Only the last one will be retained

[eps1lon]

This is expected since you create multiple roots. If a render should overwrite the previous one, create the root just once:

const root = createRoot(container);
root.render(<App />)
root.render(<App />)

[qluwlh]

Why is returning a null value not overwritten, while returning a value can be overwritten? The behavior of the two is inconsistent.

 if(!show){
    return <></>   // Will not be covered
  }

 if(!show){
    return <div>value</div>   //  Will be covered
  }