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

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

src/components/Dialog/index.web.tsx

@@ -73,12 +73,18 @@ export function Outer({
       setIsOpen(false)
 
       try {
-        if (cb && typeof cb === 'function') {
-          // This timeout ensures that the callback runs at the same time as it would on native. I.e.
-          // console.log('Step 1') -> close(() => console.log('Step 3')) -> console.log('Step 2')
-          // This should always output 'Step 1', 'Step 2', 'Step 3', but without the timeout it would output
-          // 'Step 1', 'Step 3', 'Step 2'.
-          setTimeout(cb)
+        /*
+         * Nested rather than `&&`: React Compiler cannot lower a logical
+         * expression in a test position inside a `try`.
+         */
+        if (cb) {
+          if (typeof cb === 'function') {
+            // This timeout ensures that the callback runs at the same time as it would on native. I.e.
+            // console.log('Step 1') -> close(() => console.log('Step 3')) -> console.log('Step 2')
+            // This should always output 'Step 1', 'Step 2', 'Step 3', but without the timeout it would output
+            // 'Step 1', 'Step 3', 'Step 2'.
+            setTimeout(cb)
+          }
         }
       } catch (e: any) {
         logger.error(`Dialog closeCallback failed`, {

src/components/FeedCard.tsx

@@ -295,6 +295,8 @@ function SaveButtonInner({
       e.preventDefault()
       e.stopPropagation()
 
+      const pinned = pin || false
+
       try {
         if (savedFeedConfig) {
           await removeFeed(savedFeedConfig)
@@ -303,7 +305,7 @@ function SaveButtonInner({
             {
               type,
               value: uri,
-              pinned: pin || false,
+              pinned,
             },
           ])
         }

src/components/PostControls/index.tsx

@@ -107,9 +107,10 @@ let PostControls = ({
       return
     }
 
+    const existingLike = post.viewer?.like
     try {
       setHasLikeIconBeenToggled(true)
-      if (!post.viewer?.like) {
+      if (!existingLike) {
         sendInteraction({
           item: post.uri,
           event: 'app.bsky.feed.defs#interactionLike',
@@ -137,8 +138,9 @@ let PostControls = ({
       return
     }
 
+    const existingRepost = post.viewer?.repost
     try {
-      if (!post.viewer?.repost) {
+      if (!existingRepost) {
         sendInteraction({
           item: post.uri,
           event: 'app.bsky.feed.defs#interactionRepost',

src/components/ProfileCard.tsx

@@ -491,16 +491,21 @@ export function FollowButtonInner({
   const onPressFollow = async (e: GestureResponderEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    const displayNameOrHandle = profile.displayName || profile.handle
     try {
       await queueFollow()
       Toast.show(
         l`Following ${sanitizeDisplayName(
-          profile.displayName || profile.handle,
+          displayNameOrHandle,
           moderation.ui('displayName'),
         )}`,
       )
-      onPressProp?.(e)
-      onFollow?.()
+      if (onPressProp) {
+        onPressProp(e)
+      }
+      if (onFollow) {
+        onFollow()
+      }
     } catch (e) {
       const err = e as Error
       if (err?.name !== 'AbortError') {
@@ -514,15 +519,18 @@ export function FollowButtonInner({
   const onPressUnfollow = async (e: GestureResponderEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    const displayNameOrHandle = profile.displayName || profile.handle
     try {
       await queueUnfollow()
       Toast.show(
         l`No longer following ${sanitizeDisplayName(
-          profile.displayName || profile.handle,
+          displayNameOrHandle,
           moderation.ui('displayName'),
         )}`,
       )
-      onPressProp?.(e)
+      if (onPressProp) {
+        onPressProp(e)
+      }
     } catch (e) {
       const err = e as Error
       if (err?.name !== 'AbortError') {

src/components/dialogs/lists/CreateOrEditListDialog.tsx

@@ -221,6 +221,16 @@ function DialogInner({
   const onPressSave = useCallback(async () => {
     setImageError('')
     setDisplayNameTooShort(false)
+    /*
+     * Hoisted above the `try`: React Compiler cannot lower a conditional
+     * expression inside one.
+     */
+    const updatedMessage = isCurateList
+      ? _(msg({message: 'User list updated', context: 'toast'}))
+      : _(msg({message: 'Moderation list updated', context: 'toast'}))
+    const createdMessage = isCurateList
+      ? _(msg({message: 'User list created', context: 'toast'}))
+      : _(msg({message: 'Moderation list created', context: 'toast'}))
     try {
       if (displayName.length === 0) {
         setDisplayNameTooShort(true)
@@ -244,11 +254,7 @@ function DialogInner({
           descriptionFacets: richText.facets,
           avatar: newListAvatar,
         })
-        Toast.show(
-          isCurateList
-            ? _(msg({message: 'User list updated', context: 'toast'}))
-            : _(msg({message: 'Moderation list updated', context: 'toast'})),
-        )
+        Toast.show(updatedMessage)
         control.close(() => onSave?.(list.uri))
       } else {
         const {uri} = await createListMutation({
@@ -258,11 +264,7 @@ function DialogInner({
           descriptionFacets: richText.facets,
           avatar: newListAvatar,
         })
-        Toast.show(
-          isCurateList
-            ? _(msg({message: 'User list created', context: 'toast'}))
-            : _(msg({message: 'Moderation list created', context: 'toast'})),
-        )
+        Toast.show(createdMessage)
         control.close(() => onSave?.(uri))
       }
     } catch (e: any) {