From 45ba73baff1c13379b5bc2a9cabc3dc180af6db7 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 10 Jun 2021 20:15:10 +0100 Subject: [PATCH] Wrap eventhandle-specific logic in a flag --- .../src/ReactFiberCommitWork.new.js | 55 +++++++++++-------- .../src/ReactFiberCommitWork.old.js | 55 +++++++++++-------- .../src/ReactFiberWorkLoop.new.js | 7 ++- .../src/ReactFiberWorkLoop.old.js | 7 ++- 4 files changed, 74 insertions(+), 50 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 0f6bfdee73d16..37c9bbcda79d4 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent'; import type {HookFlags} from './ReactHookEffectTags'; import { + enableCreateEventHandleAPI, enableProfilerTimer, enableProfilerCommitHooks, enableProfilerNestedUpdatePhase, @@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() { while (nextEffect !== null) { const fiber = nextEffect; - // TODO: Should wrap this in flags check, too, as optimization - const deletions = fiber.deletions; - if (deletions !== null) { - for (let i = 0; i < deletions.length; i++) { - const deletion = deletions[i]; - commitBeforeMutationEffectsDeletion(deletion); + // This phase is only used for beforeActiveInstanceBlur. + // Let's skip the whole loop if it's off. + if (enableCreateEventHandleAPI) { + // TODO: Should wrap this in flags check, too, as optimization + const deletions = fiber.deletions; + if (deletions !== null) { + for (let i = 0; i < deletions.length; i++) { + const deletion = deletions[i]; + commitBeforeMutationEffectsDeletion(deletion); + } } } @@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { const current = finishedWork.alternate; const flags = finishedWork.flags; - if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) { - // Check to see if the focused element was inside of a hidden (Suspense) subtree. - // TODO: Move this out of the hot path using a dedicated effect tag. - if ( - finishedWork.tag === SuspenseComponent && - isSuspenseBoundaryBeingHidden(current, finishedWork) && - doesFiberContain(finishedWork, focusedInstanceHandle) - ) { - shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(finishedWork); + if (enableCreateEventHandleAPI) { + if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) { + // Check to see if the focused element was inside of a hidden (Suspense) subtree. + // TODO: Move this out of the hot path using a dedicated effect tag. + if ( + finishedWork.tag === SuspenseComponent && + isSuspenseBoundaryBeingHidden(current, finishedWork) && + doesFiberContain(finishedWork, focusedInstanceHandle) + ) { + shouldFireAfterActiveInstanceBlur = true; + beforeActiveInstanceBlur(finishedWork); + } } } @@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { } function commitBeforeMutationEffectsDeletion(deletion: Fiber) { - // TODO (effects) It would be nice to avoid calling doesFiberContain() - // Maybe we can repurpose one of the subtreeFlags positions for this instead? - // Use it to store which part of the tree the focused instance is in? - // This assumes we can safely determine that instance during the "render" phase. - if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) { - shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(deletion); + if (enableCreateEventHandleAPI) { + // TODO (effects) It would be nice to avoid calling doesFiberContain() + // Maybe we can repurpose one of the subtreeFlags positions for this instead? + // Use it to store which part of the tree the focused instance is in? + // This assumes we can safely determine that instance during the "render" phase. + if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) { + shouldFireAfterActiveInstanceBlur = true; + beforeActiveInstanceBlur(deletion); + } } } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 63942e1a6936d..98e8faebb0b8e 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent'; import type {HookFlags} from './ReactHookEffectTags'; import { + enableCreateEventHandleAPI, enableProfilerTimer, enableProfilerCommitHooks, enableProfilerNestedUpdatePhase, @@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() { while (nextEffect !== null) { const fiber = nextEffect; - // TODO: Should wrap this in flags check, too, as optimization - const deletions = fiber.deletions; - if (deletions !== null) { - for (let i = 0; i < deletions.length; i++) { - const deletion = deletions[i]; - commitBeforeMutationEffectsDeletion(deletion); + // This phase is only used for beforeActiveInstanceBlur. + // Let's skip the whole loop if it's off. + if (enableCreateEventHandleAPI) { + // TODO: Should wrap this in flags check, too, as optimization + const deletions = fiber.deletions; + if (deletions !== null) { + for (let i = 0; i < deletions.length; i++) { + const deletion = deletions[i]; + commitBeforeMutationEffectsDeletion(deletion); + } } } @@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { const current = finishedWork.alternate; const flags = finishedWork.flags; - if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) { - // Check to see if the focused element was inside of a hidden (Suspense) subtree. - // TODO: Move this out of the hot path using a dedicated effect tag. - if ( - finishedWork.tag === SuspenseComponent && - isSuspenseBoundaryBeingHidden(current, finishedWork) && - doesFiberContain(finishedWork, focusedInstanceHandle) - ) { - shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(finishedWork); + if (enableCreateEventHandleAPI) { + if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) { + // Check to see if the focused element was inside of a hidden (Suspense) subtree. + // TODO: Move this out of the hot path using a dedicated effect tag. + if ( + finishedWork.tag === SuspenseComponent && + isSuspenseBoundaryBeingHidden(current, finishedWork) && + doesFiberContain(finishedWork, focusedInstanceHandle) + ) { + shouldFireAfterActiveInstanceBlur = true; + beforeActiveInstanceBlur(finishedWork); + } } } @@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { } function commitBeforeMutationEffectsDeletion(deletion: Fiber) { - // TODO (effects) It would be nice to avoid calling doesFiberContain() - // Maybe we can repurpose one of the subtreeFlags positions for this instead? - // Use it to store which part of the tree the focused instance is in? - // This assumes we can safely determine that instance during the "render" phase. - if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) { - shouldFireAfterActiveInstanceBlur = true; - beforeActiveInstanceBlur(deletion); + if (enableCreateEventHandleAPI) { + // TODO (effects) It would be nice to avoid calling doesFiberContain() + // Maybe we can repurpose one of the subtreeFlags positions for this instead? + // Use it to store which part of the tree the focused instance is in? + // This assumes we can safely determine that instance during the "render" phase. + if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) { + shouldFireAfterActiveInstanceBlur = true; + beforeActiveInstanceBlur(deletion); + } } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index af00bb022df81..105e43229bd36 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -19,6 +19,7 @@ import { warnAboutDeprecatedLifecycles, enableSuspenseServerRenderer, replayFailedUnitOfWorkWithInvokeGuardedCallback, + enableCreateEventHandleAPI, enableProfilerTimer, enableProfilerCommitHooks, enableProfilerNestedUpdatePhase, @@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) { // The next phase is the mutation phase, where we mutate the host tree. commitMutationEffects(root, finishedWork, lanes); - if (shouldFireAfterActiveInstanceBlur) { - afterActiveInstanceBlur(); + if (enableCreateEventHandleAPI) { + if (shouldFireAfterActiveInstanceBlur) { + afterActiveInstanceBlur(); + } } resetAfterCommit(root.containerInfo); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 38b1986443881..baff7e76b5e74 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -19,6 +19,7 @@ import { warnAboutDeprecatedLifecycles, enableSuspenseServerRenderer, replayFailedUnitOfWorkWithInvokeGuardedCallback, + enableCreateEventHandleAPI, enableProfilerTimer, enableProfilerCommitHooks, enableProfilerNestedUpdatePhase, @@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) { // The next phase is the mutation phase, where we mutate the host tree. commitMutationEffects(root, finishedWork, lanes); - if (shouldFireAfterActiveInstanceBlur) { - afterActiveInstanceBlur(); + if (enableCreateEventHandleAPI) { + if (shouldFireAfterActiveInstanceBlur) { + afterActiveInstanceBlur(); + } } resetAfterCommit(root.containerInfo);