fix: rerender remounted components

Author: ph-fritsche

src/shared/event.ts

@@ -16,17 +16,26 @@ export function removeListener(
     cache: reactCache,
     id: string,
     keys?: (keyof reactCache)[],
-): void {
-    (keys ?? Object.keys(cache)).forEach(key => {
-        delProperty(cache, [key, 'listeners', id])
+): (keyof reactCache)[] {
+    const removedKeys: (keyof reactCache)[] = []
+    const traverseKeys = (keys ?? Object.keys(cache))
+
+    traverseKeys.forEach(key => {
+        if (cache[key]?.listeners?.[id]) {
+            delProperty(cache, [key, 'listeners', id])
+            removedKeys.push(key)
+        }
     })
+
+    return removedKeys
 }
 
 export function dispatch(
     cache: reactCache,
     keys: (keyof reactCache)[],
 ): void {
     const listeners: reactCacheEntry['listeners'] = {}
+
     keys.forEach(key => {
         Object.entries(cache[key]?.listeners ?? {}).forEach(([id, listener]) => {
             listeners[id] = listener

src/useCached.ts

@@ -1,6 +1,6 @@
-import { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { createStore } from 'idb-keyval'
-import { reactCache, removeListener } from './shared'
+import { addListener, reactCache, removeListener } from './shared'
 import { createApi } from './methods'
 import { CacheContext } from './context'
 
@@ -24,16 +24,19 @@ export function useCached({dbName = 'Cached', storeName = 'keyval', context = tr
     }
     const cache = context ? contextCache[dbName][storeName] : componentCache
 
+    const subscribedKeys = useRef<string[]>([])
     const id = useRef(Math.random().toString(36)).current
-    const [, setState] = useState({})
+    const [, _setState] = useState({})
+    const rerender = useCallback(() => _setState({}), [_setState])
 
     useEffect(() => {
+        addListener(cache, subscribedKeys.current, id, rerender)
         return () => {
-            removeListener(cache, id)
+            subscribedKeys.current = removeListener(cache, id)
         }
     })
 
-    const api = useMemo(() => createApi(cache, store, id, () => setState({})), [cache, store, id, setState])
+    const api = useMemo(() => createApi(cache, store, id, rerender), [cache, store, id, rerender])
 
     return api
 }

test/shared/event.ts

@@ -40,8 +40,8 @@ it('remove listeners', () => {
         },
     }
 
-    removeListener(cache, 'listenerTestA', ['foo', 'baz'])
-    removeListener(cache, 'listenerTestB')
+    expect(removeListener(cache, 'listenerTestA', ['foo', 'baz'])).toEqual(['foo'])
+    expect(removeListener(cache, 'listenerTestB')).toEqual(['bar'])
 
     expect(cache).toEqual({
         bar: {