[Statsig] Make gate checks lazily (#3594)

eslint/use-typed-gates.js

@@ -25,6 +25,7 @@ exports.create = function create(context) {
             "Use useGate() from '#/lib/statsig/statsig' instead of the one on npm.",
         })
       }
+      // TODO: Verify gate() call results aren't stored in variables.
     },
   }
 }

src/lib/hooks/useOTAUpdates.ts

@@ -31,8 +31,8 @@ async function setExtraParams() {
 }
 
 export function useOTAUpdates() {
-  const shouldReceiveUpdates =
+  const gate = useGate()
-    useGate('receive_updates') && isEnabled && !__DEV__
+  const shouldReceiveUpdates = isEnabled && !__DEV__ && gate('receive_updates')
 
   const appState = React.useRef<AppStateStatus>('active')
   const lastMinimize = React.useRef(0)

src/lib/statsig/statsig.tsx

@@ -2,11 +2,7 @@ import React from 'react'
 import {Platform} from 'react-native'
 import {AppState, AppStateStatus} from 'react-native'
 import {sha256} from 'js-sha256'
-import {
+import {Statsig, StatsigProvider} from 'statsig-react-native-expo'
-  Statsig,
-  StatsigProvider,
-  useGate as useStatsigGate,
-} from 'statsig-react-native-expo'
 
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
@@ -98,16 +94,24 @@ export function logEvent<E extends keyof LogEvents>(
   }
 }
 
-export function useGate(gateName: Gate): boolean {
+export function useGate(): (gateName: Gate) => boolean {
-  const {isLoading, value} = useStatsigGate(gateName)
+  const cache = React.useRef<Map<Gate, boolean>>()
-  if (isLoading) {
+  if (cache.current === undefined) {
-    // This should not happen because of waitForInitialization={true}.
+    cache.current = new Map()
-    console.error('Did not expected isLoading to ever be true.')
   }
-  // This shouldn't technically be necessary but let's get a strong
+  const gate = React.useCallback((gateName: Gate): boolean => {
-  // guarantee that a gate value can never change while mounted.
+    // TODO: Replace local cache with a proper session one.
-  const [initialValue] = React.useState(value)
+    const cachedValue = cache.current!.get(gateName)
-  return initialValue
+    if (cachedValue !== undefined) {
+      return cachedValue
+    }
+    const value = Statsig.initializeCalled()
+      ? Statsig.checkGate(gateName)
+      : false
+    cache.current!.set(gateName, value)
+    return value
+  }, [])
+  return gate
 }
 
 function toStatsigUser(did: string | undefined): StatsigUser {

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -80,9 +80,7 @@ let ProfileHeaderStandard = ({
     })
   }, [track, openModal, profile])
 
-  const autoExpandSuggestionsOnProfileFollow = useGate(
+  const gate = useGate()
-    'autoexpand_suggestions_on_profile_follow',
-  )
   const onPressFollow = () => {
     requireAuth(async () => {
       try {
@@ -96,7 +94,7 @@ let ProfileHeaderStandard = ({
             )}`,
           ),
         )
-        if (isWeb && autoExpandSuggestionsOnProfileFollow) {
+        if (isWeb && gate('autoexpand_suggestions_on_profile_follow')) {
           setShowSuggestedFollows(true)
         }
       } catch (e: any) {

src/state/shell/selected-feed.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import {Gate} from '#/lib/statsig/gates'
 import {useGate} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import * as persisted from '#/state/persisted'
@@ -10,7 +11,7 @@ type SetContext = (v: string) => void
 const stateContext = React.createContext<StateContext>('home')
 const setContext = React.createContext<SetContext>((_: string) => {})
 
-function getInitialFeed(startSessionWithFollowing: boolean) {
+function getInitialFeed(gate: (gateName: Gate) => boolean) {
   if (isWeb) {
     if (window.location.pathname === '/') {
       const params = new URLSearchParams(window.location.search)
@@ -26,7 +27,7 @@ function getInitialFeed(startSessionWithFollowing: boolean) {
       return feedFromSession
     }
   }
-  if (!startSessionWithFollowing) {
+  if (!gate('start_session_with_following')) {
     const feedFromPersisted = persisted.get('lastSelectedHomeFeed')
     if (feedFromPersisted) {
       // Fall back to the last chosen one across all tabs.
@@ -37,10 +38,8 @@ function getInitialFeed(startSessionWithFollowing: boolean) {
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const startSessionWithFollowing = useGate('start_session_with_following')
+  const gate = useGate()
-  const [state, setState] = React.useState(() =>
+  const [state, setState] = React.useState(() => getInitialFeed(gate))
-    getInitialFeed(startSessionWithFollowing),
-  )
 
   const saveState = React.useCallback((feed: string) => {
     setState(feed)

src/view/com/feeds/FeedPage.tsx

@@ -53,6 +53,7 @@ export function FeedPage({
   const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<ListMethods>(null)
   const [hasNew, setHasNew] = React.useState(false)
+  const gate = useGate()
 
   const scrollToTop = React.useCallback(() => {
     scrollElRef.current?.scrollToOffset({
@@ -105,9 +106,10 @@ export function FeedPage({
 
   let feedPollInterval
   if (
-    useGate('disable_poll_on_discover') &&
     feed === // Discover
-      'feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot'
+      'feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot' &&
+    // TODO: This gate check is still too early. Move it to where the polling happens.
+    gate('disable_poll_on_discover')
   ) {
     feedPollInterval = undefined
   } else {

src/view/com/post-thread/PostThreadFollowBtn.tsx

@@ -48,7 +48,7 @@ function PostThreadFollowBtnLoaded({
     'PostThreadItem',
   )
   const requireAuth = useRequireAuth()
-  const showFollowBackLabel = useGate('show_follow_back_label')
+  const gate = useGate()
 
   const isFollowing = !!profile.viewer?.following
   const isFollowedBy = !!profile.viewer?.followedBy
@@ -140,7 +140,7 @@ function PostThreadFollowBtnLoaded({
             style={[!isFollowing ? palInverted.text : pal.text, s.bold]}
             numberOfLines={1}>
             {!isFollowing ? (
-              showFollowBackLabel && isFollowedBy ? (
+              isFollowedBy && gate('show_follow_back_label') ? (
                 <Trans>Follow Back</Trans>
               ) : (
                 <Trans>Follow</Trans>

src/view/com/util/List.tsx

@@ -40,8 +40,8 @@ function ListImpl<ItemT>(
   const isScrolledDown = useSharedValue(false)
   const contextScrollHandlers = useScrollHandlers()
   const pal = usePalette('default')
-  const showsVerticalScrollIndicator =
+  const gate = useGate()
-    !useGate('hide_vertical_scroll_indicators') || isWeb
+
   function handleScrolledDownChange(didScrollDown: boolean) {
     onScrolledDownChange?.(didScrollDown)
   }
@@ -97,7 +97,9 @@ function ListImpl<ItemT>(
       scrollEventThrottle={1}
       style={style}
       ref={ref}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      showsVerticalScrollIndicator={
+        isWeb || !gate('hide_vertical_scroll_indicators')
+      }
     />
   )
 }

src/view/com/util/Views.jsx

@@ -10,14 +10,11 @@ export function CenteredView(props) {
 }
 
 export function ScrollView(props) {
-  const showsVerticalScrollIndicator = !useGate(
+  const gate = useGate()
-    'hide_vertical_scroll_indicators',
-  )
-
   return (
     <Animated.ScrollView
       {...props}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      showsVerticalScrollIndicator={!gate('hide_vertical_scroll_indicators')}
     />
   )
 }

src/view/screens/Home.tsx

@@ -111,21 +111,20 @@ function HomeScreenReady({
     }),
   )
 
-  const disableMinShellOnForegrounding = useGate(
+  const gate = useGate()
-    'disable_min_shell_on_foregrounding',
-  )
   React.useEffect(() => {
-    if (disableMinShellOnForegrounding) {
     const listener = AppState.addEventListener('change', nextAppState => {
       if (nextAppState === 'active') {
+        // TODO: Check if minimal shell is on before logging an exposure.
+        if (gate('disable_min_shell_on_foregrounding')) {
           setMinimalShellMode(false)
         }
+      }
     })
     return () => {
       listener.remove()
     }
-    }
+  }, [setMinimalShellMode, gate])
-  }, [setMinimalShellMode, disableMinShellOnForegrounding])
 
   const onPageSelected = React.useCallback(
     (index: number) => {

src/view/screens/ModerationBlockedAccounts.tsx

@@ -38,8 +38,7 @@ export function ModerationBlockedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
-  const showsVerticalScrollIndicator =
+  const gate = useGate()
-    !useGate('hide_vertical_scroll_indicators') || isWeb
 
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
@@ -169,7 +168,9 @@ export function ModerationBlockedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
-          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          showsVerticalScrollIndicator={
+            isWeb || !gate('hide_vertical_scroll_indicators')
+          }
         />
       )}
     </CenteredView>

src/view/screens/ModerationMutedAccounts.tsx

@@ -38,8 +38,8 @@ export function ModerationMutedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
-  const showsVerticalScrollIndicator =
+  const gate = useGate()
-    !useGate('hide_vertical_scroll_indicators') || isWeb
+
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
     data,
@@ -167,7 +167,9 @@ export function ModerationMutedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
-          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          showsVerticalScrollIndicator={
+            isWeb || !gate('hide_vertical_scroll_indicators')
+          }
         />
       )}
     </CenteredView>

src/view/screens/Profile.tsx

@@ -143,7 +143,7 @@ function ProfileScreenLoaded({
   const setMinimalShellMode = useSetMinimalShellMode()
   const {openComposer} = useComposerControls()
   const {screen, track} = useAnalytics()
-  const shouldUseScrollableHeader = useGate('new_profile_scroll_component')
+  const gate = useGate()
   const {
     data: labelerInfo,
     error: labelerError,
@@ -317,7 +317,7 @@ function ProfileScreenLoaded({
   // =
 
   const renderHeader = React.useCallback(() => {
-    if (shouldUseScrollableHeader) {
+    if (gate('new_profile_scroll_component')) {
       return (
         <ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
           <ProfileHeader
@@ -343,7 +343,7 @@ function ProfileScreenLoaded({
       )
     }
   }, [
-    shouldUseScrollableHeader,
+    gate,
     scrollViewTag,
     profile,
     labelerInfo,

src/view/screens/Search/Search.tsx

@@ -210,7 +210,8 @@ function useSuggestedFollowsV2(): [
 
 function SearchScreenSuggestedFollows() {
   const pal = usePalette('default')
-  const useSuggestedFollows = useGate('use_new_suggestions_endpoint')
+  const gate = useGate()
+  const useSuggestedFollows = gate('use_new_suggestions_endpoint')
     ? // Conditional hook call here is *only* OK because useGate()
       // result won't change until a remount.
       useSuggestedFollowsV2
@@ -406,8 +407,7 @@ export function SearchScreenInner({
   const {isDesktop} = useWebMediaQueries()
   const [activeTab, setActiveTab] = React.useState(0)
   const {_} = useLingui()
-
+  const gate = useGate()
-  const isNewSearch = useGate('new_search')
 
   const onPageSelected = React.useCallback(
     (index: number) => {
@@ -420,7 +420,7 @@ export function SearchScreenInner({
 
   const sections = React.useMemo(() => {
     if (!query) return []
-    if (isNewSearch) {
+    if (gate('new_search')) {
       if (hasSession) {
         return [
           {
@@ -487,7 +487,7 @@ export function SearchScreenInner({
         ]
       }
     }
-  }, [hasSession, isNewSearch, _, query, activeTab])
+  }, [hasSession, gate, _, query, activeTab])
 
   if (hasSession) {
     return query ? (