Unblock React Compiler for 23 components across ten small causes (#11542)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/Dialog/context.ts

@@ -42,7 +42,6 @@ export function useDialogControl(): DialogOuterProps['control'] {
   useEffect(() => {
     activeDialogs.current.set(id, control)
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       activeDialogs.current.delete(id)
     }
   }, [id, activeDialogs])

src/components/EmojiPicker/preload.web.ts

@@ -1,4 +1,3 @@
-import {useCallback} from 'react'
 import {init} from 'emoji-mart'
 
 /**
@@ -16,15 +15,16 @@ let loadRequested = false
  *
  * @see {@link https://github.com/missive/emoji-mart/blob/16978d04a766eec6455e2e8bb21cd8dc0b3c7436/README.md?plain=1#L194 | emoji-mart preloading docs}
  */
-export function useWebPreloadEmoji({immediate}: {immediate?: boolean} = {}) {
-  const preload = useCallback(async () => {
-    if (loadRequested) return
-    loadRequested = true
-    try {
-      const data = (await import('@emoji-mart/data')).default
-      init({data})
-    } catch (e) {}
-  }, [])
-  if (immediate) preload()
-  return preload
+async function loadEmojiData() {
+  if (loadRequested) return
+  loadRequested = true
+  try {
+    const data = (await import('@emoji-mart/data')).default
+    init({data})
+  } catch (e) {}
+}
+
+export function useWebPreloadEmoji({immediate}: {immediate?: boolean} = {}) {
+  if (immediate) loadEmojiData()
+  return loadEmojiData
 }

src/components/InterestTabs.tsx

@@ -54,6 +54,16 @@ export function InterestTabs({
   const pendingTabOffsets = useRef<{x: number; width: number}[]>([])
   const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([])
 
+  function scrollIntoViewIfNeeded(index: number) {
+    const btnLayout = tabOffsets[index]
+    if (!btnLayout) return
+    listRef.current?.scrollTo({
+      // centered
+      x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2),
+      animated: true,
+    })
+  }
+
   const onInitialLayout = useNonReactiveCallback(() => {
     const index = interests.indexOf(selectedInterest)
     scrollIntoViewIfNeeded(index)
@@ -65,16 +75,6 @@ export function InterestTabs({
     }
   }, [tabOffsets, onInitialLayout])
 
-  function scrollIntoViewIfNeeded(index: number) {
-    const btnLayout = tabOffsets[index]
-    if (!btnLayout) return
-    listRef.current?.scrollTo({
-      // centered
-      x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2),
-      animated: true,
-    })
-  }
-
   function handleSelectTab(index: number) {
     const tab = interests[index]
     onSelectTab(tab)

src/components/LanguageSelect.tsx

@@ -5,13 +5,15 @@ import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {APP_LANGUAGES} from '#/locale/languages'
 import * as Select from '#/components/Select'
 
+const DEFAULT_ITEMS = APP_LANGUAGES.map(l => ({
+  label: l.name,
+  value: l.code2,
+}))
+
 export function LanguageSelect({
   value,
   onChange,
-  items = APP_LANGUAGES.map(l => ({
-    label: l.name,
-    value: l.code2,
-  })),
+  items = DEFAULT_ITEMS,
   label,
   disabledBlueskySupportedLanguageSanitization = false,
 }: {

src/components/Lightbox/pager/ImageItem/ImageItem.android.tsx

@@ -79,6 +79,11 @@ const ImageItem = ({
 
   // Keep track of when we're entering or leaving scaled rendering.
   // Note: DO NOT move any logic reading animated values outside this function.
+  function handleZoom(nextIsScaled: boolean) {
+    setIsScaled(nextIsScaled)
+    onZoom(nextIsScaled)
+  }
+
   useAnimatedReaction(
     () => {
       if (pinchScale.get() !== 1) {
@@ -100,11 +105,6 @@ const ImageItem = ({
     },
   )
 
-  function handleZoom(nextIsScaled: boolean) {
-    setIsScaled(nextIsScaled)
-    onZoom(nextIsScaled)
-  }
-
   // On Android, stock apps prevent going "out of bounds" on pan or pinch. You should "bump" into edges.
   // If the user tried to pan too hard, this function will provide the negative panning to stay in bounds.
   function getExtraTranslationToStayInBounds(

src/components/Post/Embed/VideoEmbed/index.tsx

@@ -121,10 +121,12 @@ function InnerWrapper({embed}: Props) {
         setIsActive={active => {
           setIsActive(active)
           if (active) {
-            telemetryRef.current ??= createPlaybackTelemetry({
-              surface: 'feed',
-              presentation: embed.presentation === 'gif' ? 'gif' : 'video',
-            })
+            if (telemetryRef.current == null) {
+              telemetryRef.current = createPlaybackTelemetry({
+                surface: 'feed',
+                presentation: embed.presentation === 'gif' ? 'gif' : 'video',
+              })
+            }
             telemetryRef.current.activated()
           } else {
             telemetryRef.current?.deactivated()

src/components/ProfileBadges.tsx

@@ -86,17 +86,20 @@ export function ProfileBadges({
 
   const gap = isOnTheSmallSide ? a.gap_2xs : a.gap_xs
   const padding = gap.gap / 2
+  const hitSlops = []
   let visibleBadgeIndex = 0
-  const hitSlops = badgeVisibility.map(isVisible => {
-    if (!isVisible) return HITSLOP_20
-
+  for (const isVisible of badgeVisibility) {
+    if (!isVisible) {
+      hitSlops.push(HITSLOP_20)
+      continue
+    }
     const index = visibleBadgeIndex++
-    return {
+    hitSlops.push({
       ...HITSLOP_20,
       left: index === 0 ? HITSLOP_20.left : padding,
       right: index === badgeCount - 1 ? HITSLOP_20.right : padding,
-    }
-  })
+    })
+  }
 
   return (
     <View style={[a.flex_row, a.align_center, gap, style]}>

src/components/Select/index.tsx

@@ -122,9 +122,12 @@ export function Trigger({children, hitSlop, label}: TriggerProps) {
   }
 }
 
+const defaultValueText: NonNullable<ValueProps['children']> = value =>
+  value.label
+
 export function ValueText({
   placeholder,
-  children = value => value.label,
+  children = defaultValueText,
   style,
 }: ValueProps) {
   const [value] = useContext(ValueTextContext)

src/components/StarterPack/StarterPackCard.tsx

@@ -62,6 +62,7 @@ export function Card({
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
+  const isOwnStarterPack = creator?.did === currentAccount?.did
 
   if (!bsky.isType(app.bsky.graph.starterpack, record)) {
     return null
@@ -82,7 +83,7 @@ export function Card({
             emoji
             style={[a.leading_snug, t.atoms.text_contrast_medium]}
             numberOfLines={1}>
-            {creator?.did === currentAccount?.did
+            {isOwnStarterPack
               ? _(msg`Starter pack by you`)
               : _(msg`Starter pack by ${sanitizeHandle(creator.handle, '@')}`)}
           </Text>

src/components/WelcomeModal.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react'
+import {useEffect, useEffectEvent, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {ImageBackground} from 'expo-image'
 import {Trans, useLingui} from '@lingui/react/macro'
@@ -35,11 +35,14 @@ export function WelcomeModal({control}: WelcomeModalProps) {
     }, 150)
   }
 
+  const onPresented = useEffectEvent(() => {
+    ax.metric('welcomeModal:presented', {})
+  })
+
   useEffect(() => {
     if (control.isOpen) {
-      ax.metric('welcomeModal:presented', {})
+      onPresented()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [control.isOpen])
 
   const onPressCreateAccount = () => {

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -294,6 +294,37 @@ export function PostInteractionSettingsDialogControlledInner(
   )
 }
 
+/**
+ * Lives outside the component because the early `return []` inside a `useMemo`
+ * is memoization React Compiler cannot preserve.
+ */
+function getToggleGroupValues(settings: ThreadgateAllowUISetting[]): string[] {
+  const values: string[] = []
+  for (const setting of settings) {
+    switch (setting.type) {
+      case 'everybody':
+      case 'nobody':
+        // no granularity, early return with nothing
+        return []
+      case 'followers':
+        values.push('followers')
+        break
+      case 'following':
+        values.push('following')
+        break
+      case 'mention':
+        values.push('mention')
+        break
+      case 'list':
+        values.push(`list:${setting.list}`)
+        break
+      default:
+        break
+    }
+  }
+  return values
+}
+
 export function PostInteractionSettingsForm({
   canSave = true,
   onSave,
@@ -348,32 +379,7 @@ export function PostInteractionSettingsForm({
     v => v.type === 'list',
   ).length
 
-  const toggleGroupValues = useMemo(() => {
-    const values: string[] = []
-    for (const setting of threadgateAllowUISettings) {
-      switch (setting.type) {
-        case 'everybody':
-        case 'nobody':
-          // no granularity, early return with nothing
-          return []
-        case 'followers':
-          values.push('followers')
-          break
-        case 'following':
-          values.push('following')
-          break
-        case 'mention':
-          values.push('mention')
-          break
-        case 'list':
-          values.push(`list:${setting.list}`)
-          break
-        default:
-          break
-      }
-    }
-    return values
-  }, [threadgateAllowUISettings])
+  const toggleGroupValues = getToggleGroupValues(threadgateAllowUISettings)
 
   const toggleGroupOnChange = (values: string[]) => {
     const settings: ThreadgateAllowUISetting[] = []

src/components/moderation/ReportDialog/index.tsx

@@ -92,7 +92,7 @@ export function ReportDialog(
     openCount: number
     videoTimestampSeconds?: number
   }>({openCount: 0})
-  const onOpen = useCallback(() => {
+  const onOpen = () => {
     const seconds =
       subject?.type === 'post' && subject.attributes.video
         ? reportDialogMetadata?.current.videoTimestampSeconds
@@ -105,7 +105,7 @@ export function ReportDialog(
       videoTimestampSeconds:
         seconds !== undefined && seconds >= 1 ? Math.floor(seconds) : undefined,
     }))
-  }, [reportDialogMetadata, subject])
+  }
   const propsOnClose = props.onClose
   const onClose = useCallback(() => {
     ax.metric('reportDialog:close', {})