@samitouri / QOS-React-2 / commits / 41287d4475

Use recursion to traverse during "reappear layout" phase

This converts the "reappear layout" phase to iterate over its effects recursively instead of iteratively. This makes it easier to track contextual information, like whether a fiber is inside a hidden tree. We already made this change for several other phases, like mutation and layout mount. See 481dece for more context.

Andrew Clark committed Jul 14, 2022 at 17:55 UTC 41287d44753f0ea03d54bd8296d733ff82dfe336

2 files changed +154 -178

packages/react-reconciler/src/ReactFiberCommitWork.new.js

+77 -89

@@ -1132,11 +1132,12 @@ function commitLayoutEffectOnFiber(

1132 if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {

1133 // This is the root of a reappearing boundary. Turn its layout

1134 // effects back on.

1135 - // TODO: Convert this to use recursion

1136 - nextEffect = finishedWork;

1137 - reappearLayoutEffects_begin(finishedWork);

1135 + recursivelyTraverseReappearLayoutEffects(finishedWork);

1136 }

1137

1138 + // TODO: We shouldn't traverse twice when reappearing layout effects.

1139 + // Move this into the else block of the above if statement, and modify

1140 + // reappearLayoutEffects to fire regular layout effects, too.

1141 recursivelyTraverseLayoutEffects(

1142 finishedRoot,

1143 finishedWork,

@@ -1165,48 +1166,6 @@ function commitLayoutEffectOnFiber(

1166 }

1167 }

1168

1168 -function reappearLayoutEffectsOnFiber(node: Fiber) {

1169 - // Turn on layout effects in a tree that previously disappeared.

1170 - // TODO (Offscreen) Check: flags & LayoutStatic

1171 - switch (node.tag) {

1172 - case FunctionComponent:

1173 - case ForwardRef:

1174 - case SimpleMemoComponent: {

1175 - if (

1176 - enableProfilerTimer &&

1177 - enableProfilerCommitHooks &&

1178 - node.mode & ProfileMode

1179 - ) {

1180 - try {

1181 - startLayoutEffectTimer();

1182 - safelyCallCommitHookLayoutEffectListMount(node, node.return);

1183 - } finally {

1184 - recordLayoutEffectDuration(node);

1185 - }

1186 - } else {

1187 - safelyCallCommitHookLayoutEffectListMount(node, node.return);

1188 - }

1189 - break;

1190 - }

1191 - case ClassComponent: {

1192 - const instance = node.stateNode;

1193 - if (typeof instance.componentDidMount === 'function') {

1194 - safelyCallComponentDidMount(node, node.return, instance);

1195 - }

1196 - safelyAttachRef(node, node.return);

1197 - const updateQueue: UpdateQueue<*> | null = (node.updateQueue: any);

1198 - if (updateQueue !== null) {

1199 - commitHiddenCallbacks(updateQueue, instance);

1200 - }

1201 - break;

1202 - }

1203 - case HostComponent: {

1204 - safelyAttachRef(node, node.return);

1205 - break;

1206 - }

1207 - }

1208 -}

1209 -

1169 function commitTransitionProgress(offscreenFiber: Fiber) {

1170 if (enableTransitionTracing) {

1171 // This function adds suspense boundaries to the root

@@ -2773,60 +2732,89 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {

2732 }

2733 }

2734

2776 -function reappearLayoutEffects_begin(subtreeRoot: Fiber) {

2777 - while (nextEffect !== null) {

2778 - const fiber = nextEffect;

2779 - const firstChild = fiber.child;

2735 +function reappearLayoutEffects(finishedWork: Fiber) {

2736 + // Turn on layout effects in a tree that previously disappeared.

2737 + // TODO (Offscreen) Check: flags & LayoutStatic

2738 + switch (finishedWork.tag) {

2739 + case FunctionComponent:

2740 + case ForwardRef:

2741 + case SimpleMemoComponent: {

2742 + recursivelyTraverseReappearLayoutEffects(finishedWork);

2743

2781 - if (fiber.tag === OffscreenComponent) {

2782 - const isHidden = fiber.memoizedState !== null;

2783 - if (isHidden) {

2784 - // Nested Offscreen tree is still hidden. Don't re-appear its effects.

2785 - reappearLayoutEffects_complete(subtreeRoot);

2786 - continue;

2744 + // TODO: Check for LayoutStatic flag

2745 + if (

2746 + enableProfilerTimer &&

2747 + enableProfilerCommitHooks &&

2748 + finishedWork.mode & ProfileMode

2749 + ) {

2750 + try {

2751 + startLayoutEffectTimer();

2752 + safelyCallCommitHookLayoutEffectListMount(

2753 + finishedWork,

2754 + finishedWork.return,

2755 + );

2756 + } finally {

2757 + recordLayoutEffectDuration(finishedWork);

2758 + }

2759 + } else {

2760 + safelyCallCommitHookLayoutEffectListMount(

2761 + finishedWork,

2762 + finishedWork.return,

2763 + );

2764 }

2765 + break;

2766 }

2767 + case ClassComponent: {

2768 + recursivelyTraverseReappearLayoutEffects(finishedWork);

2769

2790 - // TODO (Offscreen) Check: subtreeFlags & LayoutStatic

2791 - if (firstChild !== null) {

2792 - // This node may have been reused from a previous render, so we can't

2793 - // assume its return pointer is correct.

2794 - firstChild.return = fiber;

2795 - nextEffect = firstChild;

2796 - } else {

2797 - reappearLayoutEffects_complete(subtreeRoot);

2770 + const instance = finishedWork.stateNode;

2771 + // TODO: Check for LayoutStatic flag

2772 + if (typeof instance.componentDidMount === 'function') {

2773 + safelyCallComponentDidMount(

2774 + finishedWork,

2775 + finishedWork.return,

2776 + instance,

2777 + );

2778 + }

2779 + // TODO: Check for RefStatic flag

2780 + safelyAttachRef(finishedWork, finishedWork.return);

2781 + const updateQueue: UpdateQueue<

2782 + *,

2783 + > | null = (finishedWork.updateQueue: any);

2784 + if (updateQueue !== null) {

2785 + commitHiddenCallbacks(updateQueue, instance);

2786 + }

2787 + break;

2788 }

2799 - }

2800 -}

2801 -

2802 -function reappearLayoutEffects_complete(subtreeRoot: Fiber) {

2803 - while (nextEffect !== null) {

2804 - const fiber = nextEffect;

2789 + case HostComponent: {

2790 + recursivelyTraverseReappearLayoutEffects(finishedWork);

2791

2806 - // TODO (Offscreen) Check: flags & LayoutStatic

2807 - setCurrentDebugFiberInDEV(fiber);

2808 - try {

2809 - reappearLayoutEffectsOnFiber(fiber);

2810 - } catch (error) {

2811 - captureCommitPhaseError(fiber, fiber.return, error);

2792 + // TODO: Check for RefStatic flag

2793 + safelyAttachRef(finishedWork, finishedWork.return);

2794 + break;

2795 }

2813 - resetCurrentDebugFiberInDEV();

2814 -

2815 - if (fiber === subtreeRoot) {

2816 - nextEffect = null;

2817 - return;

2796 + case OffscreenComponent: {

2797 + const isHidden = finishedWork.memoizedState !== null;

2798 + if (isHidden) {

2799 + // Nested Offscreen tree is still hidden. Don't re-appear its effects.

2800 + } else {

2801 + recursivelyTraverseReappearLayoutEffects(finishedWork);

2802 + }

2803 + break;

2804 }

2819 -

2820 - const sibling = fiber.sibling;

2821 - if (sibling !== null) {

2822 - // This node may have been reused from a previous render, so we can't

2823 - // assume its return pointer is correct.

2824 - sibling.return = fiber.return;

2825 - nextEffect = sibling;

2826 - return;

2805 + default: {

2806 + recursivelyTraverseReappearLayoutEffects(finishedWork);

2807 + break;

2808 }

2809 + }

2810 +}

2811

2829 - nextEffect = fiber.return;

2812 +function recursivelyTraverseReappearLayoutEffects(parentFiber: Fiber) {

2813 + // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)

2814 + let child = parentFiber.child;

2815 + while (child !== null) {

2816 + reappearLayoutEffects(child);

2817 + child = child.sibling;

2818 }

2819 }

2820

packages/react-reconciler/src/ReactFiberCommitWork.old.js