Make sure Offscreen's ref is detached when unmounted

Author: sammy-SC

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

@@ -1121,7 +1121,7 @@ function commitLayoutEffectOnFiber(
           if (flags & Ref) {
             safelyAttachRef(finishedWork, finishedWork.return);
           }
-        } else if (finishedWork.pendingProps.mode !== undefined) {
+        } else {
           safelyDetachRef(finishedWork, finishedWork.return);
         }
       } else {
@@ -2148,6 +2148,8 @@ function commitDeletionEffectsOnFiber(
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
 
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,

packages/react-reconciler/src/__tests__/ReactOffscreen-test.js

@@ -1307,4 +1307,42 @@ describe('ReactOffscreen', () => {
       expect(offscreenRef.current).not.toBeNull();
     });
   });
+
+  // @gate enableOffscreen
+  it('should detach ref if Offscreen is unmounted', async () => {
+    let offscreenRef;
+
+    function App({showOffscreen}) {
+      offscreenRef = useRef(null);
+      return showOffscreen ? (
+        <Offscreen
+          mode={'manual'}
+          ref={ref => {
+            offscreenRef.current = ref;
+          }}>
+          <div />
+        </Offscreen>
+      ) : null;
+    }
+
+    const root = ReactNoop.createRoot();
+
+    await act(async () => {
+      root.render(<App showOffscreen={true} />);
+    });
+
+    expect(offscreenRef.current).not.toBeNull();
+
+    await act(async () => {
+      root.render(<App showOffscreen={false} />);
+    });
+
+    expect(offscreenRef.current).toBeNull();
+
+    await act(async () => {
+      root.render(<App showOffscreen={true} />);
+    });
+
+    expect(offscreenRef.current).not.toBeNull();
+  });
 });