Set ref.current to undefined when element unmounts (fixes #17)

build.js

@@ -73,6 +73,7 @@ terser
           'useState',
           'useRef',
           'immutable',
+          'ref',
           'current',
           'Component',
           'componentDidMount',

src/kaiku.ts

@@ -955,7 +955,9 @@ const updateFragmentInstance = (
 
     if (__DEBUG__) {
       if (nextkeys.has(key)) {
-        throw new Error('Duplicate key detected! Make sure no two sibling elements have the same key.')
+        throw new Error(
+          'Duplicate key detected! Make sure no two sibling elements have the same key.'
+        )
       }
     }
 
@@ -1376,6 +1378,10 @@ const unmountNodeInstance = (instance: NodeInstance<DefaultProps>) => {
     }
 
     case HtmlElementTag: {
+      if (typeof instance.props.ref !== 'undefined') {
+        instance.props.ref.current = undefined
+      }
+
       destroyLazyUpdates(instance)
       assert?.(instance.parentElement_)
       instance.parentElement_.element_.removeChild(instance.element_)

test/kaiku.spec.jsx

@@ -1340,16 +1340,12 @@ describe('kaiku', () => {
         effectCounter(state.counter)
         return unsubCounter
       })
-      
+
       return <div />
     }
 
     const App = () => {
-      return (
-        <div>
-          {state.isCompMounted ? <Comp /> : null}
-        </div>
-      )
+      return <div>{state.isCompMounted ? <Comp /> : null}</div>
     }
 
     render(<App />, rootNode)
@@ -1371,4 +1367,41 @@ describe('kaiku', () => {
     expect(effectCounter).toHaveBeenCalledTimes(2)
     expect(unsubCounter).toHaveBeenCalledTimes(2)
   })
+
+  it('should set `ref.current` to `undefined` once HTML element unmounts', async () => {
+    const effectCounter = jest.fn()
+    const state = createState({ isDivMounted: false })
+
+    const App = () => {
+      const ref = useRef()
+
+      useEffect(() => {
+        effectCounter(ref.current)
+      })
+
+      return (
+        <div>
+          {state.isDivMounted ? (
+            <div ref={ref} id="el">
+              foo
+            </div>
+          ) : null}
+        </div>
+      )
+    }
+
+    render(<App />, rootNode)
+    expect(effectCounter).toHaveBeenCalledTimes(1)
+    expect(effectCounter).toHaveBeenCalledWith(undefined)
+
+    state.isDivMounted = true
+    await nextTick()
+    expect(effectCounter).toHaveBeenCalledTimes(2)
+    expect(effectCounter).toHaveBeenCalledWith(rootNode.querySelector('#el'))
+
+    state.isDivMounted = false
+    await nextTick()
+    expect(effectCounter).toHaveBeenCalledTimes(3)
+    expect(effectCounter).toHaveBeenCalledWith(undefined)
+  })
 })