From 2d9d0ca45e67e64ad99b666a2088c6823d32d25d Mon Sep 17 00:00:00 2001 From: Josh Story Date: Thu, 20 Oct 2022 22:51:20 -0700 Subject: [PATCH] improve clearing perf by not checking react ownership in singletons and resource ownership in container --- .../src/client/ReactDOMHostConfig.js | 15 ++++----- .../src/__tests__/ReactDOMFloat-test.js | 33 +++++++++++++++---- 2 files changed, 32 insertions(+), 16 deletions(-) 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 , @@ -1530,8 +1551,6 @@ describe('ReactDOMFloat', () => { - - hello