Clear ref to element if ref prop is not present on next render

src/kaiku.ts

@@ -1055,7 +1055,6 @@ const updateElementProperty = (
   }
 }
 
-// TODO: Should be inlined. See above.
 const updateElementStyle = (
   element: HTMLElement | SVGElement,
   property: string,
@@ -1258,13 +1257,15 @@ const updateHtmlElementInstance = (
   // Handle properties other than `style`
   for (const key of keys) {
     if (key === 'style') continue
-
-    // TODO: Special case access to classsnames
-    if (instance.props_[key] === nextProps[key]) continue
     if (key === 'key') continue
+    if (instance.props_[key] === nextProps[key]) continue
 
     if (key === 'ref') {
-      nextProps[key]!.current = instance.element_
+      if (key in nextProps) {
+        nextProps[key]!.current = instance.element_
+      } else {
+        instance.props_[key]!.current = undefined
+      }
       continue
     }
 

test/kaiku.spec.tsx

@@ -1599,6 +1599,43 @@ describe('kaiku', () => {
     expect(effectCounter).toHaveBeenCalledWith(undefined)
   })
 
+  it('should set `ref.current` to `undefined` if element is re-used but not unmounted', async () => {
+    const effectCounter = jest.fn()
+    const state = createState({ isRef: false })
+
+    const App = () => {
+      const ref = useRef()
+
+      useEffect(() => {
+        effectCounter(ref.current)
+      })
+
+      return (
+        <div>
+          {state.isRef ? (
+            <div ref={ref} />
+          ) : (
+            <div />
+          )}
+        </div>
+      )
+    }
+
+    render(<App />, rootNode)
+    expect(effectCounter).toHaveBeenCalledTimes(1)
+    expect(effectCounter).toHaveBeenCalledWith(undefined)
+
+    state.isRef = true
+    await nextTick()
+    expect(effectCounter).toHaveBeenCalledTimes(2)
+    expect(effectCounter).toHaveBeenCalledWith(rootNode.querySelector('#el'))
+
+    state.isRef = false
+    await nextTick()
+    expect(effectCounter).toHaveBeenCalledTimes(3)
+    expect(effectCounter).toHaveBeenCalledWith(undefined)
+  })
+
   it('should handle changes in element event handlers', async () => {
     const handlerA = jest.fn()
     const handlerB = jest.fn()