Inlined components are cleaned up when unmounted

isolate-react/src/isolateComponent/nodeTree/reconcile.ts

@@ -29,6 +29,13 @@ export const reconcile = (
   }
 
   const matchedChildren = matchChildren(previous.children, next.children)
+  const matchedSet = new Set(matchedChildren.map(([p]) => p).filter((x) => !!x))
+  const unmatchedChildren = previous.children.filter((p) => !matchedSet.has(p))
+  for (let unmatchedChild of unmatchedChildren) {
+    if (unmatchedChild.componentInstance)
+      unmatchedChild.componentInstance.cleanup()
+  }
+
   const reconciledChildren = matchedChildren.map(([p, n]) => reconcile(p, n))
 
   if (previous.nodeType === 'html') {

isolate-react/test/isolateComponent/inline_effect.test.tsx

@@ -0,0 +1,33 @@
+import { describe, test } from 'mocha'
+
+import React, { useEffect } from 'react'
+import { isolateComponentTree } from '../../src/isolateComponent'
+import assert from 'node:assert'
+
+describe('inline effect cleanup', () => {
+  test('effect cleanup is run for unmounted inlined component', () => {
+    let calls = [] as string[]
+
+    const EffectTracker = ({ tag }: { tag: string }) => {
+      useEffect(() => {
+        calls.push(`mount ${tag}`)
+        return () => {
+          calls.push(`unmount ${tag}`)
+        }
+      }, [])
+      return <div>{tag}</div>
+    }
+
+    const Wrapper = ({ keys }: { keys: string[] }) => (
+      <div>
+        {keys.map((k) => (
+          <EffectTracker key={k} tag={k} />
+        ))}
+      </div>
+    )
+
+    const isolated = isolateComponentTree(<Wrapper keys={['a']} />)
+    isolated.setProps({ keys: [] })
+    assert.deepEqual(calls, ['mount a', 'unmount a'])
+  })
+})

isolate-react/test/isolateHook/waitForUpdate.test.ts

@@ -3,21 +3,44 @@ import { useEffect, useState } from 'react'
 import { isolateHook } from '../../src'
 
 describe('waitForUpdate', () => {
-  const useUpdateImmediate = () => {
-    const [count, setCount] = useState(0)
+  it('is called when an update occurs', async () => {
+    const useUpdateImmediate = () => {
+      const [count, setCount] = useState(0)
 
-    useEffect(() => {
-      setTimeout(() => setCount((c) => c + 1), 1)
-    }, [])
+      useEffect(() => {
+        setTimeout(() => setCount((c) => c + 1), 1)
+      }, [])
 
-    return count
-  }
+      return count
+    }
 
-  it('is called when an update occurs', async () => {
     const isolated = isolateHook(useUpdateImmediate)
     assert.strictEqual(isolated(), 0)
     const updated = await isolated.waitForUpdate()
     assert.strictEqual(updated, 1)
     assert.strictEqual(isolated.currentValue(), 1)
   })
+
+  it('is called when an update occurs', async () => {
+    const useUpdateTwice = () => {
+      const [count, setCount] = useState(0)
+
+      useEffect(() => {
+        setTimeout(() => setCount((c) => c + 1), 1)
+        setTimeout(() => setCount((c) => c + 1), 2)
+      }, [])
+
+      return count
+    }
+    const isolated = isolateHook(useUpdateTwice)
+    assert.strictEqual(isolated(), 0)
+
+    const first = await isolated.waitForUpdate()
+    assert.strictEqual(first, 1)
+    assert.strictEqual(isolated.currentValue(), 1)
+
+    const second = await isolated.waitForUpdate()
+    assert.strictEqual(second, 2)
+    assert.strictEqual(isolated.currentValue(), 2)
+  })
 })