From 980caf00c136929f080c23fea6be0349210bb9be Mon Sep 17 00:00:00 2001
From: Dmitrii Troitskii <jsleitor@gmail.com>
Date: Sat, 2 May 2026 10:58:48 +0000
Subject: [PATCH] fix: re-create disconnected style resource instances in
 acquireResource

When a <style precedence> resource is rendered inside a createPortal
container and that container is later removed from the DOM, React kept
a stale reference to the now-disconnected <style> element in the
hoistable-styles cache. On subsequent renders (e.g. when the same href
renders in the main tree), acquireResource would skip the creation path
because resource.instance was non-null, and return the detached element.
The style was then permanently lost for the rest of the session.

Fix: before checking resource.instance === null, also reset it to null
if the cached element is no longer connected to any document. This
causes acquireResource to re-create and re-insert the style element in
the correct hoistable root (the document head).

Fixes: https://github.com/facebook/react/issues/36373
---
 .../src/client/ReactFiberConfigDOM.js         |  8 +++
 .../src/__tests__/ReactDOMFloat-test.js       | 66 +++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index db3e2806ac3e..a4ea1e24b9b0 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -5588,6 +5588,14 @@ export function acquireResource(
   props: any,
 ): null | Instance {
   resource.count++;
+  // If a previously-created instance has been removed from the document
+  // (e.g. because it lived inside a portal container that was later
+  // removed from the DOM), we must treat it as if it were never created.
+  // Otherwise React would reuse the disconnected node and the styles it
+  // represents would be permanently lost for the rest of the session.
+  if (resource.instance !== null && !resource.instance.isConnected) {
+    resource.instance = null;
+  }
   if (resource.instance === null) {
     switch (resource.type) {
       case 'style': {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 21bf9684b285..25d0a1d90d57 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8699,6 +8699,72 @@ background-color: green;
         </html>,
       );
     });
+
+    it('re-inserts a style resource when its portal container is removed from the DOM', async () => {
+      // Regression test for https://github.com/facebook/react/issues/36373:
+      // When a <style precedence> lives inside a portal container that gets
+      // removed from the DOM, React kept a stale reference to the detached
+      // node in the hoistable-styles cache. Any subsequent render of the same
+      // href silently skipped insertion, leaving styles permanently missing.
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      // A portal container that we will later remove.
+      const portalTarget = document.createElement('div');
+      document.body.appendChild(portalTarget);
+
+      let setState;
+      function App() {
+        const [showPortal, setShow] = React.useState(true);
+        setState = setShow;
+        return (
+          <>
+            {showPortal &&
+              ReactDOM.createPortal(
+                <style href="x" precedence="custom">
+                  {'.a{color:red}'}
+                </style>,
+                portalTarget,
+              )}
+            <style href="x" precedence="custom">
+              {'.a{color:red}'}
+            </style>
+            <div className="a">content</div>
+          </>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await clientAct(() => {
+        root.render(<App />);
+      });
+
+      // Both the portal render and the main-tree render share the same resource.
+      // After the first render the style should be in the document head.
+      const stylesBefore = document.head.querySelectorAll(
+        '[data-href="x"][data-precedence="custom"]',
+      );
+      expect(stylesBefore.length).toBe(1);
+
+      // Remove the portal target (simulates unmounting a detached portal container).
+      portalTarget.remove();
+
+      // Re-render to force a fresh acquireResource call with the same href.
+      await clientAct(() => {
+        setState(false); // hide portal, only main-tree style remains
+      });
+
+      // The style should still exist in the document — if the fix is absent,
+      // the cached-but-disconnected instance would be returned and the style
+      // would be gone from the document.
+      const stylesAfter = document.head.querySelectorAll(
+        '[data-href="x"][data-precedence="custom"]',
+      );
+      expect(stylesAfter.length).toBeGreaterThanOrEqual(1);
+
+      root.unmount();
+      container.remove();
+    });
   });
 
   describe('Script Resources', () => {