Clean up react memo

src/components/Timeline/Shared/Actioned.tsx

@@ -144,19 +144,23 @@ const TimelineActioned = React.memo(
       }
     }, [])
 
-    return <View style={styles.actioned} children={children} />
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: StyleConstants.Spacing.S,
+          paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
+          paddingRight: StyleConstants.Spacing.Global.PagePadding
+        }}
+        children={children}
+      />
+    )
   },
   () => true
 )
 
 const styles = StyleSheet.create({
-  actioned: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: StyleConstants.Spacing.S,
-    paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
-    paddingRight: StyleConstants.Spacing.Global.PagePadding
-  },
   icon: {
     marginRight: StyleConstants.Spacing.S
   }

src/components/Timeline/Shared/Actions.tsx

@@ -2,6 +2,8 @@ import analytics from '@components/analytics'
 import Icon from '@components/Icon'
 import { displayMessage } from '@components/Message'
 import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RootStackParamList } from '@utils/navigation/navigators'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   QueryKeyTimeline,
@@ -31,7 +33,7 @@ const TimelineActions: React.FC<Props> = ({
   accts,
   reblog
 }) => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { t } = useTranslation('componentTimeline')
   const { colors, theme } = useTheme()
   const iconColor = colors.secondary

src/components/Timeline/Shared/Avatar.tsx

@@ -50,8 +50,7 @@ const TimelineAvatar = React.memo(
         }}
       />
     )
-  },
+  }
-  () => true
 )
 
 export default TimelineAvatar

src/components/Timeline/Shared/Card.tsx

@@ -8,65 +8,62 @@ import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  card: Mastodon.Card
+  card: Pick<
+    Mastodon.Card,
+    'url' | 'image' | 'blurhash' | 'title' | 'description'
+  >
 }
 
-const TimelineCard = React.memo(
+const TimelineCard = React.memo(({ card }: Props) => {
-  ({ card }: Props) => {
+  const { colors } = useTheme()
-    const { colors } = useTheme()
+  const navigation = useNavigation()
-    const navigation = useNavigation()
 
-    return (
+  return (
-      <Pressable
+    <Pressable
-        accessible
+      accessible
-        accessibilityRole='link'
+      accessibilityRole='link'
-        style={[styles.card, { borderColor: colors.border }]}
+      style={[styles.card, { borderColor: colors.border }]}
-        onPress={async () => {
+      onPress={async () => {
-          analytics('timeline_shared_card_press')
+        analytics('timeline_shared_card_press')
-          await openLink(card.url, navigation)
+        await openLink(card.url, navigation)
-        }}
+      }}
-        testID='base'
+      testID='base'
-      >
+    >
-        {card.image ? (
+      {card.image ? (
-          <GracefullyImage
+        <GracefullyImage
-            uri={{ original: card.image }}
+          uri={{ original: card.image }}
-            blurhash={card.blurhash}
+          blurhash={card.blurhash}
-            style={styles.left}
+          style={styles.left}
-            imageStyle={styles.image}
+          imageStyle={styles.image}
-          />
+        />
-        ) : null}
+      ) : null}
-        <View style={styles.right}>
+      <View style={styles.right}>
-          <Text
+        <Text
-            numberOfLines={2}
+          numberOfLines={2}
-            style={[styles.rightTitle, { color: colors.primaryDefault }]}
+          style={[styles.rightTitle, { color: colors.primaryDefault }]}
-            testID='title'
+          testID='title'
-          >
+        >
-            {card.title}
+          {card.title}
-          </Text>
+        </Text>
-          {card.description ? (
+        {card.description ? (
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.rightDescription,
-                { color: colors.primaryDefault }
-              ]}
-              testID='description'
-            >
-              {card.description}
-            </Text>
-          ) : null}
           <Text
             numberOfLines={1}
-            style={[styles.rightLink, { color: colors.secondary }]}
+            style={[styles.rightDescription, { color: colors.primaryDefault }]}
+            testID='description'
           >
-            {card.url}
+            {card.description}
           </Text>
-        </View>
+        ) : null}
-      </Pressable>
+        <Text
-    )
+          numberOfLines={1}
-  },
+          style={[styles.rightLink, { color: colors.secondary }]}
-  () => true
+        >
-)
+          {card.url}
+        </Text>
+      </View>
+    </Pressable>
+  )
+})
 
 const styles = StyleSheet.create({
   card: {

src/components/Timeline/Shared/Content.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 export interface Props {
-  status: Pick<Mastodon.Status, 'content' | 'spoiler_text' | 'emojis'> & {
+  status: Pick<
-    mentions?: Mastodon.Status['mentions']
+    Mastodon.Status,
-    tags?: Mastodon.Status['tags']
+    'content' | 'spoiler_text' | 'emojis' | 'mentions' | 'tags'
-  }
+  >
   numberOfLines?: number
   highlighted?: boolean
   disableDetails?: boolean
@@ -72,7 +72,9 @@ const TimelineContent = React.memo(
       </>
     )
   },
-  (prev, next) => prev.status.content === next.status.content
+  (prev, next) =>
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
 export default TimelineContent

src/components/Timeline/Shared/Feedback.tsx

@@ -10,7 +10,10 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'id' | 'edited_at' | 'reblogs_count' | 'favourites_count'
+  >
   highlighted: boolean
 }
 
@@ -125,6 +128,7 @@ const TimelineFeedback = React.memo(
     )
   },
   (prev, next) =>
+    prev.status.edited_at === next.status.edited_at &&
     prev.status.reblogs_count === next.status.reblogs_count &&
     prev.status.favourites_count === next.status.favourites_count
 )

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -37,7 +37,7 @@ const HeaderSharedCreated = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) => prev.edited_at === next.edited_at
 )
 
 export default HeaderSharedCreated

src/components/Timeline/Shared/Translate.tsx

@@ -7,13 +7,16 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text } from 'react-native'
+import { Pressable, Text } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   highlighted: boolean
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'language' | 'spoiler_text' | 'content' | 'emojis'
+  >
 }
 
 const TimelineTranslate = React.memo(
@@ -60,7 +63,12 @@ const TimelineTranslate = React.memo(
     return (
       <>
         <Pressable
-          style={[styles.button, { paddingBottom: isSuccess ? 0 : undefined }]}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: StyleConstants.Spacing.S,
+            paddingBottom: isSuccess ? 0 : undefined
+          }}
           onPress={() => {
             if (enabled) {
               if (!isSuccess) {
@@ -128,15 +136,10 @@ const TimelineTranslate = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) =>
+    prev.status.language === next.status.language &&
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: StyleConstants.Spacing.S
-  }
-})
-
 export default TimelineTranslate