From b8c96b136d9968fd593ea0ed44adfc2ac39b6b8d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Jul 2022 13:10:14 -0400
Subject: [PATCH] Move ref commit effects inside switch statement

Only certain fiber types can have refs attached to them, so this moves the
Ref effect logic out of the common path and into the corresponding branch
of the layout phase's switch statement.

The types of fibers this affects are host components and class components.
Function components are not affected because they can only have a ref via
useImperativeHandle, which has a different implementation. The experimental
Scope type attaches its refs in the mutation phase, not the layout phase.
---
 .../src/ReactFiberCommitWork.new.js           | 25 ++++++++-----------
 .../src/ReactFiberCommitWork.old.js           | 25 ++++++++-----------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 097628db06d15..eae4ff6bd408e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
           commitMount(instance, type, props, finishedWork);
         }
 
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
         );
     }
   }
-
-  if (!offscreenSubtreeWasHidden) {
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    } else {
-      if (finishedWork.flags & Ref) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
 }
 
 function reappearLayoutEffectsOnFiber(node: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 252200fd5fbf3..5b3ae31df0b00 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
           commitMount(instance, type, props, finishedWork);
         }
 
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
         );
     }
   }
-
-  if (!offscreenSubtreeWasHidden) {
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    } else {
-      if (finishedWork.flags & Ref) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
 }
 
 function reappearLayoutEffectsOnFiber(node: Fiber) {