feat: add usePromiseStore to prevent duplicate async requests

Author: TheUnderScorer

__tests__/use-visitor-data.test.tsx

@@ -1,6 +1,6 @@
 import { useVisitorData, UseVisitorDataReturn } from '../src'
 import { render, renderHook } from '@testing-library/react'
-import { actWait, createWrapper } from './helpers'
+import { actWait, createWrapper, wait } from './helpers'
 import { act } from 'react-dom/test-utils'
 import { useEffect, useState } from 'react'
 import userEvent from '@testing-library/user-event'
@@ -71,6 +71,35 @@ describe('useVisitorData', () => {
     )
   })
 
+  it('should avoid duplicate requests if one is already pending', async () => {
+    mockGet.mockImplementation(async () => {
+      await wait(250)
+      return mockGetResult
+    })
+
+    const wrapper = createWrapper()
+    const { result } = renderHook(() => useVisitorData({ immediate: false }), { wrapper })
+    expect(result.current).toMatchObject(
+      expect.objectContaining({
+        isLoading: false,
+        data: undefined,
+      })
+    )
+
+    await Promise.all([result.current.getData(), result.current.getData()])
+
+    await actWait(500)
+
+    expect(mockStart).toHaveBeenCalled()
+    expect(mockGet).toHaveBeenCalledTimes(1)
+    expect(result.current).toMatchObject(
+      expect.objectContaining({
+        isLoading: false,
+        data: mockGetResult,
+      })
+    )
+  })
+
   it("shouldn't call getData on mount if 'immediate' option is set to false", async () => {
     mockGet.mockImplementation(() => mockGetResult)
 

src/components/fp-provider.tsx

@@ -5,6 +5,7 @@ import * as packageInfo from '../../package.json'
 import { isSSR } from '../ssr'
 import { WithEnvironment } from './with-environment'
 import type { EnvDetails } from '../env.types'
+import { usePromiseStore } from '../utils/use-promise-store'
 
 export interface FpProviderOptions extends StartOptions {
   /**
@@ -86,16 +87,20 @@ function ProviderWithEnv({
     return clientRef.current
   }, [createClient])
 
+  const { doRequest } = usePromiseStore()
+
   const getVisitorData = useCallback(
     (options?: GetOptions) => {
       const client = getClient()
 
-      return client.get({
+      const mergedOptions = {
         ...getOptions,
         ...options,
-      })
+      }
+
+      return doRequest(async () => client.get(mergedOptions), mergedOptions)
     },
-    [getClient, getOptions]
+    [doRequest, getClient, getOptions]
   )
 
   const contextValue = useMemo(() => {

src/utils/use-promise-store.ts

@@ -0,0 +1,50 @@
+import { GetOptions, GetResult } from '@fingerprint/agent'
+import { useCallback, useRef } from 'react'
+
+function getCacheKey(options?: GetOptions) {
+  if (!options) {
+    return ''
+  }
+
+  return `${options.tag}-${options.linkedId}-${options.timeout}`
+}
+
+export type UsePromiseStoreReturn = {
+  /**
+   *  Accepts a callback that returns a promise (`requestCallback`)
+   *   and optional parameters (`options`). Ensures that the same request identified by a cache key is
+   *   only executed once at a time, and returns the stored promise for the request. The promise is
+   *   removed from the store once it is resolved or rejected.
+   * */
+  doRequest: (requestCallback: () => Promise<GetResult>, options?: GetOptions) => Promise<GetResult>
+}
+
+/**
+ * Manages a store of promises to handle unique asynchronous requests, ensuring that
+ * requests with the same key are not duplicated while they are still pending.
+ */
+export function usePromiseStore(): UsePromiseStoreReturn {
+  const store = useRef(new Map<string, Promise<GetResult>>()).current
+
+  const doRequest = useCallback(
+    (requestCallback: () => Promise<GetResult>, options?: GetOptions) => {
+      const cacheKey = getCacheKey(options)
+      let cachedPromise = store.get(cacheKey)
+
+      if (!cachedPromise) {
+        cachedPromise = requestCallback().finally(() => {
+          store.delete(cacheKey)
+        })
+
+        store.set(cacheKey, cachedPromise)
+      }
+
+      return cachedPromise
+    },
+    [store]
+  )
+
+  return {
+    doRequest,
+  }
+}