Use _pendingVisibility to batch Offscreen visibility updates

facebook · Dec 2, 2022 · bdf8abc · bdf8abc
1 parent fc6911a
commit bdf8abc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -685,24 +685,18 @@ function updateOffscreenComponent(
 ) {
   const nextProps: OffscreenProps = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
+  const isPendingDetached = (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0;
 
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
-  // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is
-  // to support batching of `attach` and `detach` calls.
-  workInProgress.stateNode._visibility &= ~OffscreenDetached;
-  workInProgress.stateNode._visibility |=
-    workInProgress.stateNode._pendingVisibility & OffscreenDetached;
-
   markRef(current, workInProgress);
 
   if (
     nextProps.mode === 'hidden' ||
     (enableLegacyHidden &&
       nextProps.mode === 'unstable-defer-without-hiding') ||
-    // TODO: remove read from stateNode.
-    workInProgress.stateNode._visibility & OffscreenDetached
+    isPendingDetached
   ) {
     // Rendering a hidden tree.
 

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -2879,6 +2879,12 @@ function commitMutationEffectsOnFiber(
       // TODO: Add explicit effect flag to set _current.
       finishedWork.stateNode._current = finishedWork;
 
+      // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is
+      // to support batching of `attach` and `detach` calls.
+      finishedWork.stateNode._visibility &= ~OffscreenDetached;
+      finishedWork.stateNode._visibility |=
+      finishedWork.stateNode._pendingVisibility & OffscreenDetached;
+
       if (flags & Visibility) {
         const offscreenInstance: OffscreenInstance = finishedWork.stateNode;