fix(react): make useAtomSelector wait for idle time to do failsafe …

…cleanup (#113)

packages/atoms/src/classes/Selectors.ts

@@ -56,6 +56,7 @@ export class Selectors {
     {
       cache?: SelectorCache
       ignorePhase?: number
+      timeoutId?: ReturnType<typeof requestIdleCallback | typeof setTimeout>
     }
   > = {}
 

packages/react/src/hooks/useAtomSelector.ts

@@ -119,15 +119,23 @@ export const useAtomSelector = <T, Args extends any[]>(
 
     // React StrictMode's double renders can wreak havoc on the selector cache.
     // Clean up havoc
-    queueMicrotask(() => {
-      cancelCleanup = false
-
-      Object.values(selectors._storage).forEach(storageItem => {
-        if (storageItem.cache?.id) {
-          selectors._destroySelector(storageItem.cache.id)
-        }
-      })
-    })
+    if (storage.timeoutId == null) {
+      const removeCruft = () => {
+        storage.timeoutId = null
+        cancelCleanup = false
+
+        Object.values(selectors._storage).forEach(storageItem => {
+          if (storageItem.cache?.id) {
+            selectors._destroySelector(storageItem.cache.id)
+          }
+        })
+      }
+
+      storage.timeoutId =
+        typeof requestIdleCallback !== 'undefined'
+          ? requestIdleCallback(removeCruft, { timeout: 500 })
+          : setTimeout(removeCruft, 500)
+    }
 
     return cleanup
   }, [cache])

packages/react/test/units/useAtomSelector.test.tsx

@@ -440,6 +440,8 @@ describe('useAtomSelector', () => {
     const button = await findByTestId('button')
     const div = await findByTestId('text')
 
+    jest.runAllTimers()
+
     expect(ecosystem.selectors.findAll()).toMatchInlineSnapshot(`
       {
         "@@selector-unnamed-1": SelectorCache {
@@ -531,6 +533,8 @@ describe('useAtomSelector', () => {
 
     const div = await findByTestId('text')
 
+    jest.runAllTimers()
+
     expect(div.innerHTML).toBe('1')
     expect(renders).toBe(2) // 2 rerenders + 2 for strict mode
     expect(ecosystem._graph.nodes).toMatchSnapshot()