Re-land "Clean up host pointers in level 2 of clean-up flag (#21112)"

This re-lands commit 8ed0c85.
facebook · May 3, 2021 · ab5b379 · ab5b379
1 parent fd907c1
commit ab5b379
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1382,6 +1382,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     fiber.deletions = null;
     fiber.sibling = null;
 
+    // The `stateNode` is cyclical because on host nodes it points to the host
+    // tree, which has its own pointers to children, parents, and siblings.
+    // The other host nodes also point back to fibers, so we should detach that
+    // one, too.
+    if (fiber.tag === HostComponent) {
+      const hostInstance: Instance = fiber.stateNode;
+      if (hostInstance !== null) {
+        detachDeletedInstance(hostInstance);
+      }
+    }
+    fiber.stateNode = null;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1400,15 +1412,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1382,6 +1382,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     fiber.deletions = null;
     fiber.sibling = null;
 
+    // The `stateNode` is cyclical because on host nodes it points to the host
+    // tree, which has its own pointers to children, parents, and siblings.
+    // The other host nodes also point back to fibers, so we should detach that
+    // one, too.
+    if (fiber.tag === HostComponent) {
+      const hostInstance: Instance = fiber.stateNode;
+      if (hostInstance !== null) {
+        detachDeletedInstance(hostInstance);
+      }
+    }
+    fiber.stateNode = null;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1400,15 +1412,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;