Remove a focus-effect that was triggering a rerender loop

2 files changed, 18 insertions, 21 deletions

diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 95726be64..8e1a78453 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -13,12 +13,11 @@ import {UserAvatar} from '../util/UserAvatar'
 import {Button} from '../util/forms/Button'
 import {observer} from 'mobx-react-lite'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
-import {useFocusEffect, useNavigation} from '@react-navigation/native'
+import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {pluralize} from 'lib/strings/helpers'
 import {AtUri} from '@atproto/api'
-import {isWeb} from 'platform/detection'
 
 export const CustomFeed = observer(
   ({
@@ -26,26 +25,16 @@ export const CustomFeed = observer(
     style,
     showSaveBtn = false,
     showLikes = false,
-    reloadOnFocus = false,
   }: {
     item: CustomFeedModel
     style?: StyleProp<ViewStyle>
     showSaveBtn?: boolean
     showLikes?: boolean
-    reloadOnFocus?: boolean
   }) => {
     const store = useStores()
     const pal = usePalette('default')
     const navigation = useNavigation<NavigationProp>()
 
-    // TODO: this is pretty hacky, but it works for now
-    // causes issues on web
-    useFocusEffect(() => {
-      if (reloadOnFocus && !isWeb) {
-        item.reload()
-      }
-    })
-
     return (
       <TouchableOpacity
         accessibilityRole="button"
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 01d26db91..9eb140c2e 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -170,20 +170,28 @@ export function PostEmbeds({
     AppBskyEmbedRecord.isView(embed) &&
     AppBskyFeedDefs.isGeneratorView(embed.record)
   ) {
-    // TODO memoize this?
-    return (
-      <CustomFeed
-        item={new CustomFeedModel(store, embed.record)}
-        style={[pal.view, pal.border, styles.customFeedOuter]}
-        reloadOnFocus
-        showLikes
-      />
-    )
+    return <CustomFeedEmbed record={embed.record} />
   }
 
   return <View />
 }
 
+function CustomFeedEmbed({record}: {record: AppBskyFeedDefs.GeneratorView}) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const item = React.useMemo(
+    () => new CustomFeedModel(store, record),
+    [store, record],
+  )
+  return (
+    <CustomFeed
+      item={item}
+      style={[pal.view, pal.border, styles.customFeedOuter]}
+      showLikes
+    />
+  )
+}
+
 const styles = StyleSheet.create({
   stackContainer: {
     gap: 6,