From b10cb4c01ec1ae41b67422239d919f261fefa7d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 3 Apr 2025 10:06:04 -0400
Subject: [PATCH] [DevTools] Release and aquire host instances when they're
 cloned in persistent mode (#32812)

In persistent mode they can change when they're closned and so we need
to release the old copy and acquire the new copy.
---
 .../src/backend/fiber/renderer.js             | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 0c1acc99cb..2c047447ee 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -3345,13 +3345,31 @@ export function attach(
       fiberInstance.firstChild = null;
     }
     try {
-      if (nextFiber.tag === HostHoistable) {
+      if (
+        nextFiber.tag === HostHoistable &&
+        prevFiber.memoizedState !== nextFiber.memoizedState
+      ) {
         const nearestInstance = reconcilingParent;
         if (nearestInstance === null) {
           throw new Error('Did not expect a host hoistable to be the root');
         }
         releaseHostResource(nearestInstance, prevFiber.memoizedState);
         aquireHostResource(nearestInstance, nextFiber.memoizedState);
+      } else if (
+        (nextFiber.tag === HostComponent ||
+          nextFiber.tag === HostText ||
+          nextFiber.tag === HostSingleton) &&
+        prevFiber.stateNode !== nextFiber.stateNode
+      ) {
+        // In persistent mode, it's possible for the stateNode to update with
+        // a new clone. In that case we need to release the old one and aquire
+        // new one instead.
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        releaseHostInstance(nearestInstance, prevFiber.stateNode);
+        aquireHostInstance(nearestInstance, nextFiber.stateNode);
       }
 
       const isSuspense = nextFiber.tag === SuspenseComponent;