@samitouri / QOS-React-2 / commits / b8c96b136d

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.

Andrew Clark committed Jul 8, 2022 at 13:10 UTC b8c96b136d9968fd593ea0ed44adfc2ac39b6b8d
2 files changed +22 -28
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+11 -14
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
893 // TODO: revisit this when we implement resuming.
894 commitCallbacks(updateQueue, instance);
895 }
896 +
897 + if (finishedWork.flags & Ref) {
898 + if (!offscreenSubtreeWasHidden) {
899 + commitAttachRef(finishedWork);
900 + }
901 + }
902 break;
903 }
904 case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
936 commitMount(instance, type, props, finishedWork);
937 }
938
939 + if (finishedWork.flags & Ref) {
940 + if (!offscreenSubtreeWasHidden) {
941 + commitAttachRef(finishedWork);
942 + }
943 + }
944 break;
945 }
946 case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
1031 );
1032 }
1033 }
1023 -
1024 - if (!offscreenSubtreeWasHidden) {
1025 - if (enableScopeAPI) {
1026 - // TODO: This is a temporary solution that allowed us to transition away
1027 - // from React Flare on www.
1028 - if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
1029 - commitAttachRef(finishedWork);
1030 - }
1031 - } else {
1032 - if (finishedWork.flags & Ref) {
1033 - commitAttachRef(finishedWork);
1034 - }
1035 - }
1036 - }
1034 }
1035
1036 function reappearLayoutEffectsOnFiber(node: Fiber) {
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+11 -14
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
893 // TODO: revisit this when we implement resuming.
894 commitCallbacks(updateQueue, instance);
895 }
896 +
897 + if (finishedWork.flags & Ref) {
898 + if (!offscreenSubtreeWasHidden) {
899 + commitAttachRef(finishedWork);
900 + }
901 + }
902 break;
903 }
904 case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
936 commitMount(instance, type, props, finishedWork);
937 }
938
939 + if (finishedWork.flags & Ref) {
940 + if (!offscreenSubtreeWasHidden) {
941 + commitAttachRef(finishedWork);
942 + }
943 + }
944 break;
945 }
946 case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
1031 );
1032 }
1033 }
1023 -
1024 - if (!offscreenSubtreeWasHidden) {
1025 - if (enableScopeAPI) {
1026 - // TODO: This is a temporary solution that allowed us to transition away
1027 - // from React Flare on www.
1028 - if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
1029 - commitAttachRef(finishedWork);
1030 - }
1031 - } else {
1032 - if (finishedWork.flags & Ref) {
1033 - commitAttachRef(finishedWork);
1034 - }
1035 - }
1036 - }
1034 }
1035
1036 function reappearLayoutEffectsOnFiber(node: Fiber) {