install one listener per instance, not per hook

Author: mrousavy

packages/react-native-mmkv/src/__tests__/contentChangedListener.test.ts

@@ -0,0 +1,58 @@
+import { AppState } from 'react-native'
+import type { AppStateStatus, NativeEventSubscription } from 'react-native'
+import { createMMKV } from '..'
+import { addContentChangedListener } from '../addContentChangedListener/addContentChangedListener'
+
+function mockAppStateChangeListener(): {
+  emit: (state: AppStateStatus) => void
+} {
+  const listeners = new Set<(state: AppStateStatus) => void>()
+
+  jest
+    .spyOn(AppState, 'addEventListener')
+    .mockImplementation((type, listener): NativeEventSubscription => {
+      if (type === 'change') {
+        listeners.add(listener as (state: AppStateStatus) => void)
+      }
+
+      return {
+        remove: () => {
+          listeners.delete(listener as (state: AppStateStatus) => void)
+        },
+      } as NativeEventSubscription
+    })
+
+  return {
+    emit: (state) => {
+      listeners.forEach((listener) => listener(state))
+    },
+  }
+}
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+test('content changed listener checks content when app becomes active', () => {
+  const appState = mockAppStateChangeListener()
+  const storage = createMMKV({ id: 'content-changed-listener-test' })
+  const checkContentChanged = jest.spyOn(storage, 'checkContentChanged')
+
+  addContentChangedListener(storage)
+
+  appState.emit('background')
+  expect(checkContentChanged).not.toHaveBeenCalled()
+
+  appState.emit('active')
+  expect(checkContentChanged).toHaveBeenCalledTimes(1)
+})
+
+test('content changed listener registers once per instance', () => {
+  mockAppStateChangeListener()
+  const storage = createMMKV({ id: 'content-changed-listener-once-test' })
+
+  addContentChangedListener(storage)
+  addContentChangedListener(storage)
+
+  expect(AppState.addEventListener).toHaveBeenCalledTimes(1)
+})

packages/react-native-mmkv/src/__tests__/hooks.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { AppState, Button, Text } from 'react-native'
-import type { AppStateStatus, NativeEventSubscription } from 'react-native'
+import { Button, Text } from 'react-native'
 import {
   act,
   fireEvent,
@@ -10,7 +9,7 @@ import {
   cleanup,
   waitFor,
 } from '@testing-library/react-native'
-import { createMMKV, useMMKVKeys, useMMKVNumber, useMMKVString } from '..'
+import { createMMKV, useMMKVNumber, useMMKVString } from '..'
 
 const mmkv = createMMKV()
 
@@ -21,37 +20,8 @@ beforeEach(() => {
 
 afterEach(() => {
   cleanup()
-  jest.restoreAllMocks()
 })
 
-function mockAppStateChangeListener(): {
-  emit: (state: AppStateStatus) => void
-} {
-  const listeners = new Set<(state: AppStateStatus) => void>()
-
-  jest
-    .spyOn(AppState, 'addEventListener')
-    .mockImplementation((type, listener): NativeEventSubscription => {
-      if (type === 'change') {
-        listeners.add(listener as (state: AppStateStatus) => void)
-      }
-
-      return {
-        remove: () => {
-          listeners.delete(listener as (state: AppStateStatus) => void)
-        },
-      } as NativeEventSubscription
-    })
-
-  return {
-    emit: (state) => {
-      act(() => {
-        listeners.forEach((listener) => listener(state))
-      })
-    },
-  }
-}
-
 test('hooks update when the value is changed directly through the instance', () => {
   const { result } = renderHook(() => useMMKVString('string-key', mmkv))
 
@@ -159,40 +129,3 @@ test('useMMKV hook stays consistent during rapid updates', async () => {
     expect(result.current[0]).toBe(100)
   })
 })
-
-test('useMMKV hook checks for external content changes when app becomes active', () => {
-  const appState = mockAppStateChangeListener()
-  const key = 'app-state-key'
-  let value = 'before'
-
-  const checkContentChanged = jest.spyOn(mmkv, 'checkContentChanged')
-  jest.spyOn(mmkv, 'getString').mockImplementation((requestedKey) => {
-    return requestedKey === key ? value : undefined
-  })
-
-  const { result } = renderHook(() => useMMKVString(key, mmkv))
-  expect(result.current[0]).toStrictEqual('before')
-
-  value = 'after'
-  appState.emit('active')
-
-  expect(checkContentChanged).toHaveBeenCalledTimes(1)
-  expect(result.current[0]).toStrictEqual('after')
-})
-
-test('useMMKVKeys checks for external content changes when app becomes active', () => {
-  const appState = mockAppStateChangeListener()
-  let keys: string[] = []
-
-  const checkContentChanged = jest.spyOn(mmkv, 'checkContentChanged')
-  jest.spyOn(mmkv, 'getAllKeys').mockImplementation(() => keys)
-
-  const { result } = renderHook(() => useMMKVKeys(mmkv))
-  expect(result.current).toStrictEqual([])
-
-  keys = ['external-key']
-  appState.emit('active')
-
-  expect(checkContentChanged).toHaveBeenCalledTimes(1)
-  expect(result.current).toStrictEqual(['external-key'])
-})

packages/react-native-mmkv/src/addContentChangedListener/addContentChangedListener.mock.ts

@@ -0,0 +1,5 @@
+import type { MMKV } from '../specs/MMKV.nitro'
+
+export function addContentChangedListener(_mmkv: MMKV): void {
+  // no-op in mocked environments
+}

packages/react-native-mmkv/src/addContentChangedListener/addContentChangedListener.ts

@@ -0,0 +1,36 @@
+import { AppState } from 'react-native'
+import type { AppStateStatus, NativeEventSubscription } from 'react-native'
+import type { MMKV } from '../specs/MMKV.nitro'
+
+const registeredInstances = new WeakSet<MMKV>()
+
+export function addContentChangedListener(mmkv: MMKV): void {
+  if (registeredInstances.has(mmkv)) {
+    return
+  }
+  registeredInstances.add(mmkv)
+
+  if (global.WeakRef != null && global.FinalizationRegistry != null) {
+    const weakMmkv = new WeakRef(mmkv)
+    const listener = AppState.addEventListener(
+      'change',
+      (state: AppStateStatus) => {
+        if (state === 'active') {
+          weakMmkv.deref()?.checkContentChanged()
+        }
+      }
+    )
+    const finalization = new FinalizationRegistry(
+      (l: NativeEventSubscription) => {
+        l.remove()
+      }
+    )
+    finalization.register(mmkv, listener)
+  } else {
+    AppState.addEventListener('change', (state: AppStateStatus) => {
+      if (state === 'active') {
+        mmkv.checkContentChanged()
+      }
+    })
+  }
+}

packages/react-native-mmkv/src/addContentChangedListener/addContentChangedListener.web.ts

@@ -0,0 +1,5 @@
+import type { MMKV } from '../specs/MMKV.nitro'
+
+export function addContentChangedListener(_mmkv: MMKV): void {
+  // no-op on Web
+}

packages/react-native-mmkv/src/createMMKV/createMMKV.ts

@@ -2,6 +2,7 @@ import type { MMKV } from '../specs/MMKV.nitro'
 import type { Configuration } from '../specs/MMKVFactory.nitro'
 import { Platform } from 'react-native'
 import { addMemoryWarningListener } from '../addMemoryWarningListener/addMemoryWarningListener'
+import { addContentChangedListener } from '../addContentChangedListener/addContentChangedListener'
 import { isTest } from '../isTest'
 import { createMockMMKV } from './createMockMMKV'
 import { getMMKVFactory, getPlatformContext } from '../getMMKVFactory'
@@ -33,5 +34,7 @@ export function createMMKV(configuration?: Configuration): MMKV {
   const mmkv = factory.createMMKV(config)
   // Add a hook that trims the storage when we get a memory warning
   addMemoryWarningListener(mmkv)
+  // Check for updates from app extensions/App Clips/background services when the app becomes active
+  addContentChangedListener(mmkv)
   return mmkv
 }

packages/react-native-mmkv/src/hooks/addContentChangedAppStateListener.ts

@@ -1,7 +1,6 @@
 import { useCallback, useSyncExternalStore } from 'react'
 import { getDefaultMMKVInstance } from '../createMMKV/getDefaultMMKVInstance'
 import type { MMKV } from '../specs/MMKV.nitro'
-import { addContentChangedAppStateListener } from './addContentChangedAppStateListener'
 
 export function createMMKVHook<
   T extends (boolean | number | string | ArrayBufferLike) | undefined,
@@ -22,14 +21,7 @@ export function createMMKVHook<
               onStoreChange()
             }
           })
-          const appStateListener = addContentChangedAppStateListener(
-            mmkv,
-            onStoreChange
-          )
-          return () => {
-            listener.remove()
-            appStateListener.remove()
-          }
+          return () => listener.remove()
         },
         [key, mmkv]
       ),

packages/react-native-mmkv/src/hooks/addContentChangedAppStateListener.web.ts

@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { MMKV } from '../specs/MMKV.nitro'
 import { getDefaultMMKVInstance } from '../createMMKV/getDefaultMMKVInstance'
 import { useMMKVListener } from './useMMKVListener'
-import { addContentChangedAppStateListener } from './addContentChangedAppStateListener'
 
 /**
  * Get a list of all keys that exist in the given MMKV {@linkcode instance}.
@@ -33,12 +32,5 @@ export function useMMKVKeys(instance?: MMKV): string[] {
     })
   }, mmkv)
 
-  useEffect(() => {
-    const appStateListener = addContentChangedAppStateListener(mmkv, () => {
-      setKeys(mmkv.getAllKeys())
-    })
-    return () => appStateListener.remove()
-  }, [mmkv])
-
   return allKeys
 }