[Perf - part 2] Hoist useEmail hook (#8813)

src/App.native.tsx

@@ -29,6 +29,7 @@ import {Provider as A11yProvider} from '#/state/a11y'
 import {Provider as AgeAssuranceProvider} from '#/state/ageAssurance'
 import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
 import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
   beginResolveGeolocation,
@@ -155,18 +156,20 @@ function InnerApp() {
                                               <MutedThreadsProvider>
                                                 <ProgressGuideProvider>
                                                   <ServiceAccountManager>
-                                                    <HideBottomBarBorderProvider>
-                                                      <GestureHandlerRootView
-                                                        style={s.h100pct}>
-                                                        <GlobalGestureEventsProvider>
-                                                          <IntentDialogProvider>
-                                                            <TestCtrls />
-                                                            <Shell />
-                                                            <NuxDialogs />
-                                                          </IntentDialogProvider>
-                                                        </GlobalGestureEventsProvider>
-                                                      </GestureHandlerRootView>
-                                                    </HideBottomBarBorderProvider>
+                                                    <EmailVerificationProvider>
+                                                      <HideBottomBarBorderProvider>
+                                                        <GestureHandlerRootView
+                                                          style={s.h100pct}>
+                                                          <GlobalGestureEventsProvider>
+                                                            <IntentDialogProvider>
+                                                              <TestCtrls />
+                                                              <Shell />
+                                                              <NuxDialogs />
+                                                            </IntentDialogProvider>
+                                                          </GlobalGestureEventsProvider>
+                                                        </GestureHandlerRootView>
+                                                      </HideBottomBarBorderProvider>
+                                                    </EmailVerificationProvider>
                                                   </ServiceAccountManager>
                                                 </ProgressGuideProvider>
                                               </MutedThreadsProvider>

src/App.web.tsx

@@ -18,6 +18,7 @@ import {Provider as A11yProvider} from '#/state/a11y'
 import {Provider as AgeAssuranceProvider} from '#/state/ageAssurance'
 import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
 import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
   beginResolveGeolocation,
@@ -136,12 +137,14 @@ function InnerApp() {
                                                 <SafeAreaProvider>
                                                   <ProgressGuideProvider>
                                                     <ServiceConfigProvider>
-                                                      <HideBottomBarBorderProvider>
-                                                        <IntentDialogProvider>
-                                                          <Shell />
-                                                          <NuxDialogs />
-                                                        </IntentDialogProvider>
-                                                      </HideBottomBarBorderProvider>
+                                                      <EmailVerificationProvider>
+                                                        <HideBottomBarBorderProvider>
+                                                          <IntentDialogProvider>
+                                                            <Shell />
+                                                            <NuxDialogs />
+                                                          </IntentDialogProvider>
+                                                        </HideBottomBarBorderProvider>
+                                                      </EmailVerificationProvider>
                                                     </ServiceConfigProvider>
                                                   </ProgressGuideProvider>
                                                 </SafeAreaProvider>

src/components/dialogs/nuxs/index.tsx

@@ -3,6 +3,7 @@ import {type AppBskyActorDefs} from '@atproto/api'
 
 import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {STALE} from '#/state/queries'
 import {Nux, useNuxs, useResetNuxs, useSaveNux} from '#/state/queries/nuxs'
 import {
   usePreferencesQuery,
@@ -55,7 +56,10 @@ export function useNuxDialogContext() {
 export function NuxDialogs() {
   const {currentAccount} = useSession()
   const {data: preferences} = usePreferencesQuery()
-  const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const {data: profile} = useProfileQuery({
+    did: currentAccount?.did,
+    staleTime: STALE.INFINITY, // createdAt isn't gonna change
+  })
   const onboardingActive = useOnboardingState().isActive
 
   const isLoading =

src/lib/hooks/useEmail.ts

@@ -1,35 +0,0 @@
-import {STALE} from '#/state/queries'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useCheckEmailConfirmed} from '#/state/service-config'
-import {useSession} from '#/state/session'
-import {BSKY_SERVICE} from '../constants'
-import {getHostnameFromUrl} from '../strings/url-helpers'
-
-export function useEmail() {
-  const {currentAccount} = useSession()
-
-  const {data: profile} = useProfileQuery({
-    did: currentAccount?.did,
-    staleTime: STALE.INFINITY,
-  })
-
-  const checkEmailConfirmed = useCheckEmailConfirmed()
-
-  // Date set for 11 AM PST on the 18th of November
-  const isNewEnough =
-    !!profile?.createdAt &&
-    Date.parse(profile.createdAt) >= Date.parse('2024-11-18T19:00:00.000Z')
-
-  const isSelfHost =
-    currentAccount &&
-    getHostnameFromUrl(currentAccount.service) !==
-      getHostnameFromUrl(BSKY_SERVICE)
-
-  const needsEmailVerification =
-    !isSelfHost &&
-    checkEmailConfirmed &&
-    !currentAccount?.emailConfirmed &&
-    isNewEnough
-
-  return {needsEmailVerification}
-}

src/lib/hooks/useRequireEmailVerification.tsx

@@ -1,7 +1,7 @@
 import {useCallback} from 'react'
 import {Keyboard} from 'react-native'
 
-import {useEmail} from '#/lib/hooks/useEmail'
+import {useEmail} from '#/state/email-verification'
 import {useRequireAuth, useSession} from '#/state/session'
 import {useCloseAllActiveElements} from '#/state/util'
 import {

src/screens/Messages/Conversation.tsx

@@ -15,7 +15,6 @@ import {
 } from '@react-navigation/native'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
 
-import {useEmail} from '#/lib/hooks/useEmail'
 import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {
@@ -24,6 +23,7 @@ import {
 } from '#/lib/routes/types'
 import {isWeb} from '#/platform/detection'
 import {type Shadow, useMaybeProfileShadow} from '#/state/cache/profile-shadow'
+import {useEmail} from '#/state/email-verification'
 import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo'
 import {ConvoStatus} from '#/state/messages/convo/types'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'

src/screens/Messages/components/MessageInput.tsx

@@ -18,8 +18,8 @@ import Graphemer from 'graphemer'
 
 import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
-import {useEmail} from '#/lib/hooks/useEmail'
 import {isIOS, isWeb} from '#/platform/detection'
+import {useEmail} from '#/state/email-verification'
 import {
   useMessageDraft,
   useSaveMessageDraft,

src/screens/Messages/components/RequestButtons.tsx

@@ -5,9 +5,9 @@ import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
-import {useEmail} from '#/lib/hooks/useEmail'
 import {type NavigationProp} from '#/lib/routes/types'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useEmail} from '#/state/email-verification'
 import {useAcceptConversation} from '#/state/queries/messages/accept-conversation'
 import {precacheConvoQuery} from '#/state/queries/messages/conversation'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'

src/state/email-verification.tsx

@@ -0,0 +1,64 @@
+import {createContext, useContext, useMemo} from 'react'
+
+import {BSKY_SERVICE} from '#/lib/constants'
+import {getHostnameFromUrl} from '#/lib/strings/url-helpers'
+import {STALE} from '#/state/queries'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useCheckEmailConfirmed} from '#/state/service-config'
+import {useSession} from '#/state/session'
+
+type EmailVerificationContext = {
+  needsEmailVerification: boolean
+}
+
+const EmailVerificationContext = createContext<EmailVerificationContext | null>(
+  null,
+)
+EmailVerificationContext.displayName = 'EmailVerificationContext'
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const {currentAccount} = useSession()
+
+  const {data: profile} = useProfileQuery({
+    did: currentAccount?.did,
+    staleTime: STALE.INFINITY,
+  })
+
+  const checkEmailConfirmed = useCheckEmailConfirmed()
+
+  // Date set for 11 AM PST on the 18th of November
+  const isNewEnough =
+    !!profile?.createdAt &&
+    Date.parse(profile.createdAt) >= Date.parse('2024-11-18T19:00:00.000Z')
+
+  const isSelfHost =
+    currentAccount &&
+    getHostnameFromUrl(currentAccount.service) !==
+      getHostnameFromUrl(BSKY_SERVICE)
+
+  const needsEmailVerification =
+    !isSelfHost &&
+    checkEmailConfirmed &&
+    !currentAccount?.emailConfirmed &&
+    isNewEnough
+
+  const value = useMemo(
+    () => ({needsEmailVerification}),
+    [needsEmailVerification],
+  )
+
+  return (
+    <EmailVerificationContext.Provider value={value}>
+      {children}
+    </EmailVerificationContext.Provider>
+  )
+}
+Provider.displayName = 'EmailVerificationProvider'
+
+export function useEmail() {
+  const ctx = useContext(EmailVerificationContext)
+  if (!ctx) {
+    throw new Error('useEmail must be used within a EmailVerificationProvider')
+  }
+  return ctx
+}