Expose ref to Offscreen if mode is manual

facebook · Sep 13, 2022 · a86f80d · a86f80d
1 parent e6a062b
commit a86f80d
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 1 deletion.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -677,6 +677,10 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
+  if (nextProps.mode === 'manual') {
+    markRef(current, workInProgress);
+  }
+
   if (
     nextProps.mode === 'hidden' ||
     (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -677,6 +677,10 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
+  if (nextProps.mode === 'manual') {
+    markRef(current, workInProgress);
+  }
+
   if (
     nextProps.mode === 'hidden' ||
     (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1116,6 +1116,14 @@ function commitLayoutEffectOnFiber(
           offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
         }
+
+        if (finishedWork.pendingProps.mode === 'manual') {
+          if (flags & Ref) {
+            safelyAttachRef(finishedWork, finishedWork.return);
+          }
+        } else if (finishedWork.pendingProps.mode !== undefined) {
+          safelyDetachRef(finishedWork, finishedWork.return);
+        }
       } else {
         recursivelyTraverseLayoutEffects(
           finishedRoot,

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1116,6 +1116,14 @@ function commitLayoutEffectOnFiber(
           offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
         }
+
+        if (finishedWork.pendingProps.mode === 'manual') {
+          if (flags & Ref) {
+            safelyAttachRef(finishedWork, finishedWork.return);
+          }
+        } else if (finishedWork.pendingProps.mode !== undefined) {
+          safelyDetachRef(finishedWork, finishedWork.return);
+        }
       } else {
         recursivelyTraverseLayoutEffects(
           finishedRoot,

diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -8,6 +8,7 @@ let useState;
 let useLayoutEffect;
 let useEffect;
 let useMemo;
+let useRef;
 let startTransition;
 
 describe('ReactOffscreen', () => {
@@ -24,6 +25,7 @@ describe('ReactOffscreen', () => {
     useLayoutEffect = React.useLayoutEffect;
     useEffect = React.useEffect;
     useMemo = React.useMemo;
+    useRef = React.useRef;
     startTransition = React.startTransition;
   });
 
@@ -1259,4 +1261,50 @@ describe('ReactOffscreen', () => {
       </div>,
     );
   });
+
+  describe('manual interactivity', () => {
+    // @gate enableOffscreen
+    it('should attach ref only for mode null', async () => {
+      let offscreenRef;
+
+      function App({mode}) {
+        offscreenRef = useRef(null);
+        return (
+          <Offscreen
+            mode={mode}
+            ref={ref => {
+              offscreenRef.current = ref;
+            }}>
+            <div />
+          </Offscreen>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await act(async () => {
+        root.render(<App mode={'manual'} />);
+      });
+
+      expect(offscreenRef.current).not.toBeNull();
+
+      await act(async () => {
+        root.render(<App mode={'visible'} />);
+      });
+
+      expect(offscreenRef.current).toBeNull();
+
+      await act(async () => {
+        root.render(<App mode={'hidden'} />);
+      });
+
+      expect(offscreenRef.current).toBeNull();
+
+      await act(async () => {
+        root.render(<App mode={'manual'} />);
+      });
+
+      expect(offscreenRef.current).not.toBeNull();
+    });
+  });
 });
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
@@ -209,7 +209,8 @@ export type Thenable<T> =
 export type OffscreenMode =
   | 'hidden'
   | 'unstable-defer-without-hiding'
-  | 'visible';
+  | 'visible'
+  | 'manual';
 
 export type StartTransitionOptions = {
   name?: string,