Unblock React Compiler for 18 components with value blocks inside try (#11548)

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

src/view/com/composer/drafts/DraftItem.tsx

@@ -287,9 +287,10 @@ function DraftMediaPreview({post}: {post: DraftPostDisplay}) {
       if (post.images && post.images.length > 0) {
         const loaded: LoadedImage[] = []
         for (const image of post.images) {
+          const alt = image.altText || ''
           try {
             const url = await storage.loadMediaFromLocal(image.localPath)
-            loaded.push({url, alt: image.altText || ''})
+            loaded.push({url, alt})
           } catch (e) {
             // Image doesn't exist locally, skip it
           }

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -1,4 +1,3 @@
-import {useCallback} from 'react'
 import * as MediaLibrary from 'expo-media-library/legacy'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -20,13 +19,23 @@ export function OpenCameraBtn({disabled, onAdd}: OpenCameraBtnProps) {
     MediaLibrary.usePermissions({granularPermissions: ['photo']})
   const t = useTheme()
 
-  const onPressTakePicture = useCallback(async () => {
+  const mediaGranted = mediaPermissionRes?.granted
+  const mediaCanAskAgain = mediaPermissionRes?.canAskAgain
+
+  /*
+   * No useCallback: with the diagnostics above resolved this component compiles,
+   * so React Compiler memoizes it, and the hand-written deps were what it could
+   * not preserve.
+   */
+  const onPressTakePicture = async () => {
     try {
       if (!(await requestCameraAccessIfNeeded())) {
         return
       }
-      if (!mediaPermissionRes?.granted && mediaPermissionRes?.canAskAgain) {
-        await requestMediaPermission()
+      if (!mediaGranted) {
+        if (mediaCanAskAgain) {
+          await requestMediaPermission()
+        }
       }
 
       const img = await openCamera({
@@ -49,12 +58,7 @@ export function OpenCameraBtn({disabled, onAdd}: OpenCameraBtnProps) {
       // ignore
       logger.warn('Error using camera', {error: err})
     }
-  }, [
-    onAdd,
-    requestCameraAccessIfNeeded,
-    mediaPermissionRes,
-    requestMediaPermission,
-  ])
+  }
 
   const shouldShowCameraButton = IS_NATIVE || IS_WEB_MOBILE
   if (!shouldShowCameraButton) {

src/view/com/feeds/ComposerPrompt.tsx

@@ -56,8 +56,10 @@ export function ComposerPrompt() {
         requestVideoAccessIfNeeded(),
       ])
 
-      if (!photoAccess && !videoAccess) {
-        return
+      if (!photoAccess) {
+        if (!videoAccess) {
+          return
+        }
       }
 
       if (Keyboard.isVisible()) {
@@ -108,8 +110,10 @@ export function ComposerPrompt() {
         return
       }
 
-      if (IS_NATIVE && Keyboard.isVisible()) {
-        Keyboard.dismiss()
+      if (IS_NATIVE) {
+        if (Keyboard.isVisible()) {
+          Keyboard.dismiss()
+        }
       }
 
       const image = await openCamera({
@@ -127,8 +131,16 @@ export function ComposerPrompt() {
         },
       ]
 
+      /*
+       * Statement form rather than a ternary: React Compiler cannot lower a
+       * conditional expression inside a `try`, and `imageUris` is built here.
+       */
+      let nativeImageUris
+      if (IS_NATIVE) {
+        nativeImageUris = imageUris
+      }
       openComposer({
-        imageUris: IS_NATIVE ? imageUris : undefined,
+        imageUris: nativeImageUris,
         logContext: 'Fab',
       })
     } catch (err: any) {

src/view/com/util/UserBanner.tsx

@@ -79,15 +79,22 @@ export function UserBanner({
 
     try {
       if (IS_NATIVE) {
-        onSelectNewBanner?.(
-          await compressIfNeeded(
-            await openCropper({
-              imageUri: items[0].path,
-              aspectRatio: 3 / 1,
-            }),
-            IMAGE_SIZE_CONFIG_2K_1MB,
-          ),
-        )
+        /*
+         * Nested rather than `?.()`: React Compiler cannot lower an optional
+         * call inside a `try`. Like `?.()`, this leaves the arguments
+         * unevaluated when the callback is absent.
+         */
+        if (onSelectNewBanner) {
+          onSelectNewBanner(
+            await compressIfNeeded(
+              await openCropper({
+                imageUri: items[0].path,
+                aspectRatio: 3 / 1,
+              }),
+              IMAGE_SIZE_CONFIG_2K_1MB,
+            ),
+          )
+        }
       } else {
         setRawImage(await createComposerImage(items[0]))
         editImageDialogControl.open()