Merge pull request #206 from banderson/bug/missing-reconciler-function

fix: Add missing React 18 reconciler function

.changeset/four-rivers-destroy.md

@@ -0,0 +1,5 @@
+---
+'@remote-ui/react': patch
+---
+
+Added missing `detachDeletedInstance` function to `@remote-ui/react/reconciler`. This function is invoked during React's clean up phase, so prior to this change you'd get an exception / broken app when a component is removed from the tree.

packages/react/CHANGELOG.md

@@ -8,6 +8,10 @@
 
 - [#191](https://github.com/Shopify/remote-ui/pull/191) [`77ba3da`](https://github.com/Shopify/remote-ui/commit/77ba3da217cb0e443e674afc058916ca25f5900e) Thanks [@lemonmade](https://github.com/lemonmade)! - Removed re-export of `@remote-ui/rpc`. If you need `retain` or `release`, import them directly from `@remote-ui/rpc` instead.
 
+### Patch Changes
+
+- Added missing `detachDeletedInstance` function to `@remote-ui/react/reconciler`. This function is invoked during React's clean up phase, so prior to this change you'd get an exception / broken app when a component is removed from the tree.
+
 ## 4.6.0
 
 ### Minor Changes

packages/react/src/reconciler.ts

@@ -181,6 +181,7 @@ export const createReconciler = (options?: {primary?: boolean}) =>
     resetAfterCommit() {},
     commitMount() {},
     preparePortalMount() {},
+    detachDeletedInstance() {},
   });
 
 function scheduleMicrotask(callback: () => void) {

packages/react/src/tests/e2e.test.tsx

@@ -856,4 +856,50 @@ describe('@remote-ui/react', () => {
 
     expect(appElement.innerHTML).toContain('bac');
   });
+
+  it('handles removal & cleanup of unmounted components', () => {
+    const receiver = createRemoteReceiver();
+    const remoteRoot = createRemoteRoot(receiver.receive, {
+      components: [RemoteImage, RemoteButton],
+    });
+
+    function RemoteApp() {
+      const [showImage, setShowImage] = useState(true);
+
+      return (
+        <>
+          {showImage && <RemoteImage data-test-id="image" />}
+          <RemoteButton onPress={() => setShowImage((prev) => !prev)}>
+            Toggle image
+          </RemoteButton>
+        </>
+      );
+    }
+
+    const controller = createController({
+      Button: HostButton,
+      Image: HostImage,
+    });
+
+    function HostApp() {
+      return <RemoteRenderer controller={controller} receiver={receiver} />;
+    }
+
+    domAct(() => {
+      domRoot.render(<HostApp />);
+      createRoot(remoteRoot).render(<RemoteApp />);
+      remoteRoot.mount();
+      jest.runAllTimers();
+    });
+
+    domAct(() => {
+      Simulate.click(appElement.querySelector('button')!);
+    });
+
+    domAct(() => {
+      jest.runAllTimers();
+    });
+
+    expect(appElement.innerHTML).not.toContain('data-test-id="image"');
+  });
 });