Wrap eventhandle-specific logic in a flag (#21657)
Dan Abramov committed
Jun 11, 2021 at 21:08 UTC
1a106bdc2abc7af190b791d13b2ead0c2c556f7a
4 files changed
+74
-50
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+32
-23
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
26
import type {HookFlags} from './ReactHookEffectTags';
27
28
import {
29
+ enableCreateEventHandleAPI,
30
enableProfilerTimer,
31
enableProfilerCommitHooks,
32
enableProfilerNestedUpdatePhase,
@@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() {
366
while (nextEffect !== null) {
367
const fiber = nextEffect;
368
368
- // TODO: Should wrap this in flags check, too, as optimization
369
- const deletions = fiber.deletions;
370
- if (deletions !== null) {
371
- for (let i = 0; i < deletions.length; i++) {
372
- const deletion = deletions[i];
373
- commitBeforeMutationEffectsDeletion(deletion);
369
+ // This phase is only used for beforeActiveInstanceBlur.
370
+ // Let's skip the whole loop if it's off.
371
+ if (enableCreateEventHandleAPI) {
372
+ // TODO: Should wrap this in flags check, too, as optimization
373
+ const deletions = fiber.deletions;
374
+ if (deletions !== null) {
375
+ for (let i = 0; i < deletions.length; i++) {
376
+ const deletion = deletions[i];
377
+ commitBeforeMutationEffectsDeletion(deletion);
378
+ }
379
}
380
}
381
@@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
431
const current = finishedWork.alternate;
432
const flags = finishedWork.flags;
433
429
- if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
430
- // Check to see if the focused element was inside of a hidden (Suspense) subtree.
431
- // TODO: Move this out of the hot path using a dedicated effect tag.
432
- if (
433
- finishedWork.tag === SuspenseComponent &&
434
- isSuspenseBoundaryBeingHidden(current, finishedWork) &&
435
- doesFiberContain(finishedWork, focusedInstanceHandle)
436
- ) {
437
- shouldFireAfterActiveInstanceBlur = true;
438
- beforeActiveInstanceBlur(finishedWork);
434
+ if (enableCreateEventHandleAPI) {
435
+ if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
436
+ // Check to see if the focused element was inside of a hidden (Suspense) subtree.
437
+ // TODO: Move this out of the hot path using a dedicated effect tag.
438
+ if (
439
+ finishedWork.tag === SuspenseComponent &&
440
+ isSuspenseBoundaryBeingHidden(current, finishedWork) &&
441
+ doesFiberContain(finishedWork, focusedInstanceHandle)
442
+ ) {
443
+ shouldFireAfterActiveInstanceBlur = true;
444
+ beforeActiveInstanceBlur(finishedWork);
445
+ }
446
}
447
}
448
@@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
538
}
539
540
function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
534
- // TODO (effects) It would be nice to avoid calling doesFiberContain()
535
- // Maybe we can repurpose one of the subtreeFlags positions for this instead?
536
- // Use it to store which part of the tree the focused instance is in?
537
- // This assumes we can safely determine that instance during the "render" phase.
538
- if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
539
- shouldFireAfterActiveInstanceBlur = true;
540
- beforeActiveInstanceBlur(deletion);
541
+ if (enableCreateEventHandleAPI) {
542
+ // TODO (effects) It would be nice to avoid calling doesFiberContain()
543
+ // Maybe we can repurpose one of the subtreeFlags positions for this instead?
544
+ // Use it to store which part of the tree the focused instance is in?
545
+ // This assumes we can safely determine that instance during the "render" phase.
546
+ if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
547
+ shouldFireAfterActiveInstanceBlur = true;
548
+ beforeActiveInstanceBlur(deletion);
549
+ }
550
}
551
}
552
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+32
-23
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
26
import type {HookFlags} from './ReactHookEffectTags';
27
28
import {
29
+ enableCreateEventHandleAPI,
30
enableProfilerTimer,
31
enableProfilerCommitHooks,
32
enableProfilerNestedUpdatePhase,
@@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() {
366
while (nextEffect !== null) {
367
const fiber = nextEffect;
368
368
- // TODO: Should wrap this in flags check, too, as optimization
369
- const deletions = fiber.deletions;
370
- if (deletions !== null) {
371
- for (let i = 0; i < deletions.length; i++) {
372
- const deletion = deletions[i];
373
- commitBeforeMutationEffectsDeletion(deletion);
369
+ // This phase is only used for beforeActiveInstanceBlur.
370
+ // Let's skip the whole loop if it's off.
371
+ if (enableCreateEventHandleAPI) {
372
+ // TODO: Should wrap this in flags check, too, as optimization
373
+ const deletions = fiber.deletions;
374
+ if (deletions !== null) {
375
+ for (let i = 0; i < deletions.length; i++) {
376
+ const deletion = deletions[i];
377
+ commitBeforeMutationEffectsDeletion(deletion);
378
+ }
379
}
380
}
381
@@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
431
const current = finishedWork.alternate;
432
const flags = finishedWork.flags;
433
429
- if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
430
- // Check to see if the focused element was inside of a hidden (Suspense) subtree.
431
- // TODO: Move this out of the hot path using a dedicated effect tag.
432
- if (
433
- finishedWork.tag === SuspenseComponent &&
434
- isSuspenseBoundaryBeingHidden(current, finishedWork) &&
435
- doesFiberContain(finishedWork, focusedInstanceHandle)
436
- ) {
437
- shouldFireAfterActiveInstanceBlur = true;
438
- beforeActiveInstanceBlur(finishedWork);
434
+ if (enableCreateEventHandleAPI) {
435
+ if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
436
+ // Check to see if the focused element was inside of a hidden (Suspense) subtree.
437
+ // TODO: Move this out of the hot path using a dedicated effect tag.
438
+ if (
439
+ finishedWork.tag === SuspenseComponent &&
440
+ isSuspenseBoundaryBeingHidden(current, finishedWork) &&
441
+ doesFiberContain(finishedWork, focusedInstanceHandle)
442
+ ) {
443
+ shouldFireAfterActiveInstanceBlur = true;
444
+ beforeActiveInstanceBlur(finishedWork);
445
+ }
446
}
447
}
448
@@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
538
}
539
540
function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
534
- // TODO (effects) It would be nice to avoid calling doesFiberContain()
535
- // Maybe we can repurpose one of the subtreeFlags positions for this instead?
536
- // Use it to store which part of the tree the focused instance is in?
537
- // This assumes we can safely determine that instance during the "render" phase.
538
- if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
539
- shouldFireAfterActiveInstanceBlur = true;
540
- beforeActiveInstanceBlur(deletion);
541
+ if (enableCreateEventHandleAPI) {
542
+ // TODO (effects) It would be nice to avoid calling doesFiberContain()
543
+ // Maybe we can repurpose one of the subtreeFlags positions for this instead?
544
+ // Use it to store which part of the tree the focused instance is in?
545
+ // This assumes we can safely determine that instance during the "render" phase.
546
+ if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
547
+ shouldFireAfterActiveInstanceBlur = true;
548
+ beforeActiveInstanceBlur(deletion);
549
+ }
550
}
551
}
552
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+5
-2
@@ -19,6 +19,7 @@ import {
19
warnAboutDeprecatedLifecycles,
20
enableSuspenseServerRenderer,
21
replayFailedUnitOfWorkWithInvokeGuardedCallback,
22
+ enableCreateEventHandleAPI,
23
enableProfilerTimer,
24
enableProfilerCommitHooks,
25
enableProfilerNestedUpdatePhase,
@@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) {
1855
// The next phase is the mutation phase, where we mutate the host tree.
1856
commitMutationEffects(root, finishedWork, lanes);
1857
1857
- if (shouldFireAfterActiveInstanceBlur) {
1858
- afterActiveInstanceBlur();
1858
+ if (enableCreateEventHandleAPI) {
1859
+ if (shouldFireAfterActiveInstanceBlur) {
1860
+ afterActiveInstanceBlur();
1861
+ }
1862
}
1863
resetAfterCommit(root.containerInfo);
1864
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+5
-2
@@ -19,6 +19,7 @@ import {
19
warnAboutDeprecatedLifecycles,
20
enableSuspenseServerRenderer,
21
replayFailedUnitOfWorkWithInvokeGuardedCallback,
22
+ enableCreateEventHandleAPI,
23
enableProfilerTimer,
24
enableProfilerCommitHooks,
25
enableProfilerNestedUpdatePhase,
@@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) {
1855
// The next phase is the mutation phase, where we mutate the host tree.
1856
commitMutationEffects(root, finishedWork, lanes);
1857
1857
- if (shouldFireAfterActiveInstanceBlur) {
1858
- afterActiveInstanceBlur();
1858
+ if (enableCreateEventHandleAPI) {
1859
+ if (shouldFireAfterActiveInstanceBlur) {
1860
+ afterActiveInstanceBlur();
1861
+ }
1862
}
1863
resetAfterCommit(root.containerInfo);
1864