Add our own cache in front of Statsig (#3604)

src/lib/statsig/statsig.tsx

@@ -94,23 +94,30 @@ export function logEvent<E extends keyof LogEvents>(
   }
 }
 
+// We roll our own cache in front of Statsig because it is a singleton
+// and it's been difficult to get it to behave in a predictable way.
+// Our own cache ensures consistent evaluation within a single session.
+const GateCache = React.createContext<Map<string, boolean> | null>(null)
+
 export function useGate(): (gateName: Gate) => boolean {
-  const cache = React.useRef<Map<Gate, boolean>>()
+  const cache = React.useContext(GateCache)
-  if (cache.current === undefined) {
+  if (!cache) {
-    cache.current = new Map()
+    throw Error('useGate() cannot be called outside StatsigProvider.')
   }
-  const gate = React.useCallback((gateName: Gate): boolean => {
+  const gate = React.useCallback(
-    // TODO: Replace local cache with a proper session one.
+    (gateName: Gate): boolean => {
-    const cachedValue = cache.current!.get(gateName)
+      const cachedValue = cache.get(gateName)
       if (cachedValue !== undefined) {
         return cachedValue
       }
       const value = Statsig.initializeCalled()
         ? Statsig.checkGate(gateName)
         : false
-    cache.current!.set(gateName, value)
+      cache.set(gateName, value)
       return value
-  }, [])
+    },
+    [cache],
+  )
   return gate
 }
 
@@ -154,16 +161,19 @@ AppState.addEventListener('change', (state: AppStateStatus) => {
 
 export function Provider({children}: {children: React.ReactNode}) {
   const {currentAccount} = useSession()
-  const currentStatsigUser = React.useMemo(
+  const did = currentAccount?.did
-    () => toStatsigUser(currentAccount?.did),
+  const currentStatsigUser = React.useMemo(() => toStatsigUser(did), [did])
-    [currentAccount?.did],
+  const [gateCache, setGateCache] = React.useState(() => new Map())
-  )
+  const [prevDid, setPrevDid] = React.useState(did)
+  if (did !== prevDid) {
+    setPrevDid(did)
+    setGateCache(new Map())
+  }
 
   React.useEffect(() => {
     function refresh() {
-      // Intentionally refetching the config using the JS SDK rather than React SDK
+      // This will not affect the current session.
-      // so that the new config is stored in cache but isn't used during this session.
+      // Statsig will put the results into local storage and we'll pick it up on next load.
-      // It will kick in for the next reload.
       Statsig.updateUser(currentStatsigUser)
     }
     const id = setInterval(refresh, 3 * 60e3 /* 3 min */)
@@ -171,7 +181,9 @@ export function Provider({children}: {children: React.ReactNode}) {
   }, [currentStatsigUser])
 
   return (
+    <GateCache.Provider value={gateCache}>
       <StatsigProvider
+        key={did}
         sdkKey="client-SXJakO39w9vIhl3D44u8UupyzFl4oZ2qPIkjwcvuPsV"
         mountKey={currentStatsigUser.userID}
         user={currentStatsigUser}
@@ -181,5 +193,6 @@ export function Provider({children}: {children: React.ReactNode}) {
         options={statsigOptions}>
         {children}
       </StatsigProvider>
+    </GateCache.Provider>
   )
 }