perf: skip unnecessary rerender

Author: ph-fritsche

src/methods/get.ts

@@ -72,6 +72,7 @@ export function get<
     if (missing.length) {
         debugLog('Get from idb: %s', missing.join(', '))
 
+        let hit = false
         const idbPromise = getMany(missing, store).then(
             obj => {
                 debugLog.enabled && debugLog(
@@ -82,6 +83,7 @@ export function get<
                 const stillMissing: string[] = []
                 obj.forEach((obj, i) => {
                     if (verifyEntry({ obj }, expire)) {
+                        hit = true
                         cache[ missing[i] ] = { obj }
                     } else {
                         stillMissing.push(missing[i])
@@ -104,7 +106,7 @@ export function get<
             },
         )
 
-        idbPromise.then(rerender)
+        idbPromise.then(() => hit && rerender())
 
         missing.forEach((key, i) => {
             cache[key] = cache[key] ?? {}

test/useCached.tsx

@@ -1,24 +1,49 @@
-import React from 'react'
-import { act, render } from '@testing-library/react'
+import React, { useContext } from 'react'
+import { act, render, waitFor } from '@testing-library/react'
 import { useCached } from '../src'
-import { clear } from 'idb-keyval'
+import { clear, createStore } from 'idb-keyval'
+import { CacheContext } from '../src/context'
 
-function setup(...propsArray: Parameters<typeof useCached>[0][]) {
+async function setup(
+    propsArray: Parameters<typeof useCached>[0][] = [undefined],
+    renderArray: ((api: ReturnType<typeof useCached>) => void)[] = [],
+) {
     const hook: ReturnType<typeof useCached>[] = []
-    function TestComponent({i = 0, p = {}}: {i?: number, p?: Parameters<typeof useCached>[0]} = {}) {
+    function TestComponent({
+        i = 0,
+        p = {},
+        r = () => { return },
+    }: {
+        i?: number,
+        p?: Parameters<typeof useCached>[0],
+        r?: (api: ReturnType<typeof useCached>) => void,
+    } = {}) {
         hook[i] = useCached(Object.keys(p).length ? p : undefined)
+        r(hook[i])
         return null
     }
 
+    // clear IndexedDb and default reactCache to get a fresh start
+    for (const p of propsArray) {
+        const store = createStore(p?.dbName ?? 'Cached', p?.storeName ?? 'keyval')
+        await clear(store)
+    }
+    function ClearComponent() {
+        const cache = useContext(CacheContext)
+        Object.keys(cache).forEach(k => { delete cache[k] })
+        return null
+    }
+    render(<ClearComponent/>)
+
     render(<>
-        {(propsArray.length ? propsArray : [undefined]).map((p, i) => <TestComponent key={i} i={i} p={p} />)}
+        {propsArray.map((p, i) => <TestComponent key={i} i={i} p={p} r={renderArray[i]}/>)}
     </>)
 
     return { getHook: (i = 0) => hook[i] }
 }
 
-it('provide api', () => {
-    const { getHook } = setup()
+it('provide api', async () => {
+    const { getHook } = await setup()
 
     expect(getHook()).toEqual(expect.objectContaining({
         clear: expect.any(Function),
@@ -28,8 +53,8 @@ it('provide api', () => {
     }))
 })
 
-it('provide api with custom store', () => {
-    const { getHook } = setup({dbName: 'foo', storeName: 'bar'})
+it('provide api with custom store', async () => {
+    const { getHook } = await setup([{dbName: 'foo', storeName: 'bar'}])
 
     expect(getHook()).toEqual(expect.objectContaining({
         clear: expect.any(Function),
@@ -40,7 +65,7 @@ it('provide api with custom store', () => {
 })
 
 it('get and set without context', async () => {
-    const { getHook } = setup({context: false}, {context: false})
+    const { getHook } = await setup([{context: false}, {context: false}])
 
     await act(async () => {
         getHook(0).set('foo', 'bar')
@@ -52,7 +77,7 @@ it('get and set without context', async () => {
 })
 
 it('get and set with context', async () => {
-    const { getHook } = setup({context: true}, {context: true})
+    const { getHook } = await setup([{context: true}, {context: true}])
 
     await act(async () => {
         getHook(0).set('foo', 'bar')
@@ -62,3 +87,25 @@ it('get and set with context', async () => {
     expect(getHook(0).get('foo')).toBe('bar')
     expect(getHook(1).get('foo')).toBe('bar')
 })
+
+it('rerender component on updated cache', async () => {
+    let loadingResolve: (() => void) | undefined = undefined
+    const render = jest.fn((api: ReturnType<typeof useCached>) => {
+        return api.get('foo', async () => new Promise(res => {
+            api.set('foo', 'bar')
+            loadingResolve = res
+        }))
+    })
+    await setup([undefined], [render])
+
+    expect(render).toReturnTimes(1)
+    expect(render).toHaveNthReturnedWith(1, undefined)
+
+    await waitFor(() => expect(loadingResolve).toBeTruthy())
+    act(() => {
+        loadingResolve && loadingResolve()
+    })
+
+    expect(render).toReturnTimes(2)
+    expect(render).toHaveNthReturnedWith(2, 'bar')
+})