diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
index 19bf1446f3f47..9add4a8714074 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -745,6 +745,9 @@ export function clearContainer(container: Container): void {
function clearContainerChildren(container: Node) {
let node;
let nextNode: ?Node = container.firstChild;
+ if (nextNode && nextNode.nodeType === DOCUMENT_TYPE_NODE) {
+ nextNode = nextNode.nextSibling;
+ }
while (nextNode) {
node = nextNode;
nextNode = nextNode.nextSibling;
@@ -770,11 +773,7 @@ function clearContainerChildren(container: Node) {
}
}
}
- if (node.nodeType === DOCUMENT_TYPE_NODE || isMarkedResource(node)) {
- // we retain document nodes and resources
- } else {
- container.removeChild(node);
- }
+ container.removeChild(node);
}
return;
}
@@ -1674,10 +1673,8 @@ export function clearSingleton(instance: Instance): void {
while (node) {
const nextNode = node.nextSibling;
const nodeName = node.nodeName;
- if (getInstanceFromNodeDOMTree(node) || isMarkedResource(node)) {
- // retain nodes owned by React
- } else if (
- nodeName === 'TITLE' ||
+ if (
+ isMarkedResource(node) ||
nodeName === 'HEAD' ||
nodeName === 'BODY' ||
nodeName === 'STYLE' ||
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index cfcc3e6428d43..24586c756b1b2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -235,6 +235,32 @@ describe('ReactDOMFloat', () => {
return readText(text);
}
+ // @gate enableFloat
+ it('can render resources before singletons', async () => {
+ const root = ReactDOMClient.createRoot(document);
+ root.render(
+ <>
+ foo
+
+
+
+
+ hello world
+
+ ,
+ );
+ expect(Scheduler).toFlushWithoutYielding();
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+ foo
+
+
+ hello world
+ ,
+ );
+ });
+
// @gate enableFloat
it('can acquire a resource after releasing it in the same commit', async () => {
const root = ReactDOMClient.createRoot(container);
@@ -1208,7 +1234,6 @@ describe('ReactDOMFloat', () => {
-
hello world
@@ -1372,7 +1397,6 @@ describe('ReactDOMFloat', () => {
-
hello world
,
@@ -1425,7 +1449,6 @@ describe('ReactDOMFloat', () => {
-
client
,
@@ -1503,8 +1526,6 @@ describe('ReactDOMFloat', () => {
-
-
hello