Unblock React Compiler for 6 components by removing render-phase ref access (#11544)

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

src/components/ProgressGuide/FollowDialog.tsx

@@ -270,10 +270,6 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
 
   // Track seen profiles
   const seenProfilesRef = useRef<Set<string>>(new Set())
-  const itemsRef = useRef(items)
-  itemsRef.current = items
-  const selectedInterestRef = useRef(selectedInterest)
-  selectedInterestRef.current = selectedInterest
 
   const onViewableItemsChanged = useNonReactiveCallback(
     ({viewableItems}: {viewableItems: ViewToken[]}) => {
@@ -282,7 +278,7 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
         if (item.type === 'profile') {
           if (!seenProfilesRef.current.has(item.profile.did)) {
             seenProfilesRef.current.add(item.profile.did)
-            const position = itemsRef.current.findIndex(
+            const position = items.findIndex(
               i => i.type === 'profile' && i.profile.did === item.profile.did,
             )
             ax.metric('suggestedUser:seen', {
@@ -292,9 +288,7 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
               position: position !== -1 ? position : 0,
               suggestedDid: item.profile.did,
               category:
-                selectedInterestRef.current === FOR_YOU_TAB
-                  ? null
-                  : selectedInterestRef.current,
+                selectedInterest === FOR_YOU_TAB ? null : selectedInterest,
             })
           }
         }

src/components/WhoCanReply.tsx

@@ -1,11 +1,5 @@
 import {Fragment, useMemo, useRef} from 'react'
-import {
-  Keyboard,
-  Platform,
-  type StyleProp,
-  View,
-  type ViewStyle,
-} from 'react-native'
+import {Keyboard, type StyleProp, View, type ViewStyle} from 'react-native'
 import {AtUri} from '@atproto/syntax'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -32,7 +26,7 @@ import {Group3_Stroke2_Corner0_Rounded as GroupIcon} from '#/components/icons/Gr
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
-import {IS_NATIVE} from '#/env'
+import {IS_NATIVE, IS_WEB} from '#/env'
 import {app} from '#/lexicons'
 import * as bsky from '#/types/bsky'
 
@@ -110,14 +104,9 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
         }
         onPress={onPressOpen}
         {...(isThreadAuthor
-          ? Platform.select({
-              web: {
-                onHoverIn: prefetch,
-              },
-              native: {
-                onPressIn: prefetch,
-              },
-            })
+          ? IS_WEB
+            ? {onHoverIn: prefetch}
+            : {onPressIn: prefetch}
           : {})}
         hitSlop={HITSLOP_10}>
         {({hovered, focused, pressed}) => (

src/components/contacts/components/OTPInput.tsx

@@ -9,7 +9,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {mergeRefs} from '#/lib/merge-refs'
-import {atoms as a, ios, platform, useTheme} from '#/alf'
+import {atoms as a, platform, useTheme} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 import {IS_ANDROID, IS_IOS} from '#/env'
@@ -94,7 +94,11 @@ export function OTPInput({
       </View>
       <TextInput
         // SMS autofill is borked on iOS if you open the keyboard immediately -sfn
-        onLayout={ios(() => setTimeout(() => innerRef.current?.focus(), 100))}
+        onLayout={
+          IS_IOS
+            ? () => setTimeout(() => innerRef.current?.focus(), 100)
+            : undefined
+        }
         autoFocus={IS_ANDROID}
         accessible
         accessibilityLabel={label}