Refactored recursive strict effects method to be iterative (#20642)

facebook · Jan 22, 2021 · a6b5256 · a6b5256
1 parent 3957853
commit a6b5256
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2551,7 +2551,6 @@ function commitDoubleInvokeEffectsInDEV(
  }
 }
 
-// TODO (strict effects) Rewrite to be iterative
 function invokeEffectsInDev(
  firstChild: Fiber,
  fiberFlags: Flags,
@@ -2560,19 +2559,28 @@ function invokeEffectsInDev(
  if (__DEV__ && enableDoubleInvokingEffects) {
  // We don't need to re-check for legacy roots here.
  // This function will not be called within legacy roots.
- let fiber = firstChild;
- while (fiber !== null) {
- if (fiber.child !== null) {
- const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
- if (primarySubtreeFlag !== NoFlags) {
- invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+
+ let current = firstChild;
+ let subtreeRoot = null;
+ while (current !== null) {
+ const primarySubtreeFlag = current.subtreeFlags & fiberFlags;
+ if (
+ current !== subtreeRoot &&
+ current.child !== null &&
+ primarySubtreeFlag !== NoFlags
+ ) {
+ current = current.child;
+ } else {
+ if ((current.flags & fiberFlags) !== NoFlags) {
+ invokeEffectFn(current);
  }
- }
 
- if ((fiber.flags & fiberFlags) !== NoFlags) {
- invokeEffectFn(fiber);
+ if (current.sibling !== null) {
+ current = current.sibling;
+ } else {
+ current = subtreeRoot = current.return;
+ }
  }
- fiber = fiber.sibling;
  }
  }
 }

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2708,26 +2708,36 @@ function commitDoubleInvokeEffectsInDEV(
  }
 }
 
-// TODO (strict effects) Rewrite to be iterative
 function invokeEffectsInDev(
  firstChild: Fiber,
  fiberFlags: Flags,
  invokeEffectFn: (fiber: Fiber) => void,
 ): void {
  if (__DEV__ && enableDoubleInvokingEffects) {
- let fiber = firstChild;
- while (fiber !== null) {
- if (fiber.child !== null) {
- const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
- if (primarySubtreeFlag !== NoFlags) {
- invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+ // We don't need to re-check for legacy roots here.
+ // This function will not be called within legacy roots.
+
+ let current = firstChild;
+ let subtreeRoot = null;
+ while (current !== null) {
+ const primarySubtreeFlag = current.subtreeFlags & fiberFlags;
+ if (
+ current !== subtreeRoot &&
+ current.child !== null &&
+ primarySubtreeFlag !== NoFlags
+ ) {
+ current = current.child;
+ } else {
+ if ((current.flags & fiberFlags) !== NoFlags) {
+ invokeEffectFn(current);
  }
- }
 
- if ((fiber.flags & fiberFlags) !== NoFlags) {
- invokeEffectFn(fiber);
+ if (current.sibling !== null) {
+ current = current.sibling;
+ } else {
+ current = subtreeRoot = current.return;
+ }
  }
- fiber = fiber.sibling;
  }
  }
 }