Remove most React memorization

Though added memo for timeline components making them (almost) pure

src/components/Timeline/Shared/Actions.tsx

@@ -16,7 +16,7 @@ import { useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
-import React, { useCallback, useContext, useMemo } from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
 import StatusContext from './Context'
@@ -76,7 +76,7 @@ const TimelineActions: React.FC = () => {
   })
 
   const [accountId] = useAccountStorage.string('auth.account.id')
-  const onPressReply = useCallback(() => {
+  const onPressReply = () => {
     const accts = uniqBy(
       ([status.account] as Mastodon.Account[] & Mastodon.Mention[])
         .concat(status.mentions)
@@ -89,9 +89,9 @@ const TimelineActions: React.FC = () => {
       accts,
       queryKey
     })
-  }, [status.replies_count])
+  }
   const { showActionSheetWithOptions } = useActionSheet()
-  const onPressReblog = useCallback(() => {
+  const onPressReblog = () => {
     if (!status.reblogged) {
       showActionSheetWithOptions(
         {
@@ -157,8 +157,8 @@ const TimelineActions: React.FC = () => {
         }
       })
     }
-  }, [status.reblogged, status.reblogs_count])
-  const onPressFavourite = useCallback(() => {
+  }
+  const onPressFavourite = () => {
     mutation.mutate({
       type: 'updateStatusProperty',
       queryKey,
@@ -172,8 +172,8 @@ const TimelineActions: React.FC = () => {
         countValue: status.favourites_count
       }
     })
-  }, [status.favourited, status.favourites_count])
-  const onPressBookmark = useCallback(() => {
+  }
+  const onPressBookmark = () => {
     mutation.mutate({
       type: 'updateStatusProperty',
       queryKey,
@@ -187,28 +187,25 @@ const TimelineActions: React.FC = () => {
         countValue: undefined
       }
     })
-  }, [status.bookmarked])
+  }
 
-  const childrenReply = useMemo(
-    () => (
-      <>
-        <Icon name='MessageCircle' color={iconColor} size={StyleConstants.Font.Size.L} />
-        {status.replies_count > 0 ? (
-          <CustomText
-            style={{
-              color: colors.secondary,
-              fontSize: StyleConstants.Font.Size.M,
-              marginLeft: StyleConstants.Spacing.XS
-            }}
-          >
-            {status.replies_count}
-          </CustomText>
-        ) : null}
-      </>
-    ),
-    [status.replies_count]
+  const childrenReply = () => (
+    <>
+      <Icon name='MessageCircle' color={iconColor} size={StyleConstants.Font.Size.L} />
+      {status.replies_count > 0 ? (
+        <CustomText
+          style={{
+            color: colors.secondary,
+            fontSize: StyleConstants.Font.Size.M,
+            marginLeft: StyleConstants.Spacing.XS
+          }}
+        >
+          {status.replies_count}
+        </CustomText>
+      ) : null}
+    </>
   )
-  const childrenReblog = useMemo(() => {
+  const childrenReblog = () => {
     const color = (state: boolean) => (state ? colors.green : colors.secondary)
     const disabled =
       status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
@@ -236,8 +233,8 @@ const TimelineActions: React.FC = () => {
         ) : null}
       </>
     )
-  }, [status.reblogged, status.reblogs_count])
-  const childrenFavourite = useMemo(() => {
+  }
+  const childrenFavourite = () => {
     const color = (state: boolean) => (state ? colors.red : colors.secondary)
     return (
       <>
@@ -256,13 +253,13 @@ const TimelineActions: React.FC = () => {
         ) : null}
       </>
     )
-  }, [status.favourited, status.favourites_count])
-  const childrenBookmark = useMemo(() => {
+  }
+  const childrenBookmark = () => {
     const color = (state: boolean) => (state ? colors.yellow : colors.secondary)
     return (
       <Icon name='Bookmark' color={color(status.bookmarked)} size={StyleConstants.Font.Size.L} />
     )
-  }, [status.bookmarked])
+  }
 
   return (
     <View style={{ flexDirection: 'row' }}>
@@ -275,7 +272,7 @@ const TimelineActions: React.FC = () => {
           : { accessibilityLabel: '' })}
         style={styles.action}
         onPress={onPressReply}
-        children={childrenReply}
+        children={childrenReply()}
       />
 
       <Pressable
@@ -289,7 +286,7 @@ const TimelineActions: React.FC = () => {
           : { accessibilityLabel: '' })}
         style={styles.action}
         onPress={onPressReblog}
-        children={childrenReblog}
+        children={childrenReblog()}
         disabled={
           status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
         }
@@ -306,7 +303,7 @@ const TimelineActions: React.FC = () => {
           : { accessibilityLabel: '' })}
         style={styles.action}
         onPress={onPressFavourite}
-        children={childrenFavourite}
+        children={childrenFavourite()}
       />
 
       <Pressable
@@ -320,7 +317,7 @@ const TimelineActions: React.FC = () => {
           : { accessibilityLabel: '' })}
         style={styles.action}
         onPress={onPressBookmark}
-        children={childrenBookmark}
+        children={childrenBookmark()}
       />
     </View>
   )

src/components/Timeline/Shared/Poll.tsx

@@ -14,7 +14,7 @@ import updateStatusProperty from '@utils/queryHooks/timeline/updateStatusPropert
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
-import React, { useCallback, useContext, useMemo, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
 import StatusContext from './Context'
@@ -73,7 +73,7 @@ const TimelinePoll: React.FC = () => {
     }
   })
 
-  const pollButton = useMemo(() => {
+  const pollButton = () => {
     if (!poll.expired) {
       if (!ownAccount && !poll.voted) {
         return (
@@ -127,17 +127,14 @@ const TimelinePoll: React.FC = () => {
         )
       }
     }
-  }, [theme, poll.expired, poll.voted, allOptions, mutation.isLoading])
+  }
 
-  const isSelected = useCallback(
-    (index: number): string =>
-      allOptions[index]
-        ? `Check${poll.multiple ? 'Square' : 'Circle'}`
-        : `${poll.multiple ? 'Square' : 'Circle'}`,
-    [allOptions]
-  )
+  const isSelected = (index: number): string =>
+    allOptions[index]
+      ? `Check${poll.multiple ? 'Square' : 'Circle'}`
+      : `${poll.multiple ? 'Square' : 'Circle'}`
 
-  const pollBodyDisallow = useMemo(() => {
+  const pollBodyDisallow = () => {
     const maxValue = maxBy(poll.options, option => option.votes_count)?.votes_count
     return poll.options.map((option, index) => (
       <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
@@ -191,8 +188,8 @@ const TimelinePoll: React.FC = () => {
         />
       </View>
     ))
-  }, [theme, poll.options])
-  const pollBodyAllow = useMemo(() => {
+  }
+  const pollBodyAllow = () => {
     return poll.options.map((option, index) => (
       <Pressable
         key={index}
@@ -229,7 +226,7 @@ const TimelinePoll: React.FC = () => {
         </View>
       </Pressable>
     ))
-  }, [theme, allOptions])
+  }
 
   const pollVoteCounts = () => {
     if (poll.voters_count !== null) {
@@ -263,7 +260,7 @@ const TimelinePoll: React.FC = () => {
 
   return (
     <View style={{ marginTop: StyleConstants.Spacing.M }}>
-      {poll.expired || poll.voted ? pollBodyDisallow : pollBodyAllow}
+      {poll.expired || poll.voted ? pollBodyDisallow() : pollBodyAllow()}
       <View
         style={{
           flex: 1,
@@ -272,7 +269,7 @@ const TimelinePoll: React.FC = () => {
           marginTop: StyleConstants.Spacing.XS
         }}
       >
-        {pollButton}
+        {pollButton()}
         <CustomText fontStyle='S' style={{ flexShrink: 1, color: colors.secondary }}>
           {pollVoteCounts()}
           {pollExpiration()}