Remove most React memo

Maybe would solve iOS out of memory crashes

src/Screens.tsx

@@ -331,4 +331,4 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   )
 }
 
-export default React.memo(Screens, () => true)
+export default Screens

src/components/Instance/Info.tsx

@@ -12,8 +12,7 @@ export interface Props {
   potentialWidth?: number
 }
 
-const InstanceInfo = React.memo(
-  ({ style, header, content, potentialWidth }: Props) => {
+const InstanceInfo: React.FC<Props> = ({ style, header, content, potentialWidth }) => {
   const { colors } = useTheme()
 
   return (
@@ -39,18 +38,10 @@ const InstanceInfo = React.memo(
         children={header}
       />
       {content ? (
-          <CustomText
-            fontStyle='M'
-            style={{ color: colors.primaryDefault }}
-            children={content}
-          />
+        <CustomText fontStyle='M' style={{ color: colors.primaryDefault }} children={content} />
       ) : (
         <PlaceholderLine
-            width={
-              potentialWidth
-                ? potentialWidth * StyleConstants.Font.Size.M
-                : undefined
-            }
+          width={potentialWidth ? potentialWidth * StyleConstants.Font.Size.M : undefined}
           height={StyleConstants.Font.LineHeight.M}
           color={colors.shimmerDefault}
           noMargin
@@ -59,8 +50,6 @@ const InstanceInfo = React.memo(
       )}
     </View>
   )
-  },
-  (prev, next) => prev.content === next.content
-)
+}
 
 export default InstanceInfo

src/components/Timeline/Empty.tsx

@@ -13,8 +13,7 @@ export interface Props {
   queryKey: QueryKeyTimeline
 }
 
-const TimelineEmpty = React.memo(
-  ({ queryKey }: Props) => {
+const TimelineEmpty: React.FC<Props> = ({ queryKey }) => {
   const { status, refetch } = useTimelineQuery({
     ...queryKey[1],
     options: { notifyOnChangeProps: ['status'] }
@@ -79,8 +78,6 @@ const TimelineEmpty = React.memo(
       {children()}
     </View>
   )
-  },
-  () => true
-)
+}
 
 export default TimelineEmpty

src/components/Timeline/Footer.tsx

@@ -13,8 +13,7 @@ export interface Props {
   disableInfinity: boolean
 }
 
-const TimelineFooter = React.memo(
-  ({ queryKey, disableInfinity }: Props) => {
+const TimelineFooter: React.FC<Props> = ({ queryKey, disableInfinity }) => {
   const { hasNextPage } = useTimelineQuery({
     ...queryKey[1],
     options: {
@@ -55,8 +54,6 @@ const TimelineFooter = React.memo(
       )}
     </View>
   )
-  },
-  () => true
-)
+}
 
 export default TimelineFooter

src/components/Timeline/Shared/Actions.tsx

@@ -211,15 +211,14 @@ const TimelineActions: React.FC = () => {
   )
   const childrenReblog = useMemo(() => {
     const color = (state: boolean) => (state ? colors.green : colors.secondary)
+    const disabled =
+      status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
     return (
       <>
         <Icon
           name='Repeat'
-          color={
-            status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
-              ? colors.disabled
-              : color(status.reblogged)
-          }
+          color={disabled ? colors.disabled : color(status.reblogged)}
+          crossOut={disabled}
           size={StyleConstants.Font.Size.L}
         />
         {status.reblogs_count > 0 ? (

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

@@ -9,8 +9,7 @@ export interface Props {
   application?: Mastodon.Application
 }
 
-const HeaderSharedApplication = React.memo(
-  ({ application }: Props) => {
+const HeaderSharedApplication: React.FC<Props> = ({ application }) => {
   const { colors } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
@@ -32,8 +31,6 @@ const HeaderSharedApplication = React.memo(
       })}
     </CustomText>
   ) : null
-  },
-  () => true
-)
+}
 
 export default HeaderSharedApplication

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

@@ -13,8 +13,7 @@ export interface Props {
   highlighted?: boolean
 }
 
-const HeaderSharedCreated = React.memo(
-  ({ created_at, edited_at, highlighted = false }: Props) => {
+const HeaderSharedCreated: React.FC<Props> = ({ created_at, edited_at, highlighted = false }) => {
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
@@ -25,11 +24,7 @@ const HeaderSharedCreated = React.memo(
       <CustomText fontStyle='S' style={{ color: colors.secondary }}>
         {highlighted ? (
           <>
-              <FormattedDate
-                value={new Date(actualTime)}
-                dateStyle='medium'
-                timeStyle='short'
-              />
+            <FormattedDate value={new Date(actualTime)} dateStyle='medium' timeStyle='short' />
           </>
         ) : (
           <RelativeTime time={actualTime} />
@@ -37,9 +32,7 @@ const HeaderSharedCreated = React.memo(
       </CustomText>
       {edited_at ? (
         <Icon
-            accessibilityLabel={t(
-              'shared.header.shared.edited.accessibilityLabel'
-            )}
+          accessibilityLabel={t('shared.header.shared.edited.accessibilityLabel')}
           name='Edit'
           size={StyleConstants.Font.Size.S}
           color={colors.secondary}
@@ -48,8 +41,6 @@ const HeaderSharedCreated = React.memo(
       ) : null}
     </>
   )
-  },
-  (prev, next) => prev.edited_at === next.edited_at
-)
+}
 
 export default HeaderSharedCreated

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

@@ -3,14 +3,12 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet } from 'react-native'
 
 export interface Props {
   muted?: Mastodon.Status['muted']
 }
 
-const HeaderSharedMuted = React.memo(
-  ({ muted }: Props) => {
+const HeaderSharedMuted: React.FC<Props> = ({ muted }) => {
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
@@ -18,19 +16,11 @@ const HeaderSharedMuted = React.memo(
     <Icon
       accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
       name='VolumeX'
-        size={StyleConstants.Font.Size.S}
+      size={StyleConstants.Font.Size.M}
       color={colors.secondary}
-        style={styles.visibility}
+      style={{ marginLeft: StyleConstants.Spacing.S }}
     />
   ) : null
-  },
-  () => true
-)
-
-const styles = StyleSheet.create({
-  visibility: {
-    marginLeft: StyleConstants.Spacing.S
-  }
-})
+}
 
 export default HeaderSharedMuted

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

@@ -9,8 +9,7 @@ export interface Props {
   visibility: Mastodon.Status['visibility']
 }
 
-const HeaderSharedVisibility = React.memo(
-  ({ visibility }: Props) => {
+const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
@@ -48,9 +47,7 @@ const HeaderSharedVisibility = React.memo(
     default:
       return null
   }
-  },
-  () => true
-)
+}
 
 const styles = StyleSheet.create({
   visibility: {

src/screens/Compose/Posting.tsx

@@ -3,8 +3,7 @@ import { Modal, View } from 'react-native'
 import { useTheme } from '@utils/styles/ThemeManager'
 import ComposeContext from './utils/createContext'
 
-const ComposePosting = React.memo(
-  () => {
+const ComposePosting = () => {
   const { composeState } = useContext(ComposeContext)
   const { colors } = useTheme()
 
@@ -13,15 +12,9 @@ const ComposePosting = React.memo(
       transparent
       animationType='fade'
       visible={composeState.posting}
-        children={
-          <View
-            style={{ flex: 1, backgroundColor: colors.backgroundOverlayInvert }}
-          />
-        }
+      children={<View style={{ flex: 1, backgroundColor: colors.backgroundOverlayInvert }} />}
     />
   )
-  },
-  () => true
-)
+}
 
 export default ComposePosting

src/screens/Compose/Root.tsx

@@ -17,8 +17,7 @@ import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesS
 
 export let instanceConfigurationStatusCharsURL = 23
 
-const ComposeRoot = React.memo(
-  () => {
+const ComposeRoot = () => {
   const { colors } = useTheme()
 
   instanceConfigurationStatusCharsURL = useSelector(
@@ -96,8 +95,6 @@ const ComposeRoot = React.memo(
       <ComposePosting />
     </View>
   )
-  },
-  () => true
-)
+}
 
 export default ComposeRoot

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -292,4 +292,4 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
   )
 }
 
-export default React.memo(ComposeAttachments, () => true)
+export default ComposeAttachments

src/screens/Compose/Root/Footer/Reply.tsx

@@ -31,4 +31,4 @@ const ComposeReply: React.FC = () => {
   )
 }
 
-export default React.memo(ComposeReply, () => true)
+export default ComposeReply

src/screens/Compose/Root/Header/PostingAs.tsx

@@ -1,22 +1,15 @@
 import CustomText from '@components/Text'
-import {
-  getInstanceAccount,
-  getInstanceUri
-} from '@utils/slices/instancesSlice'
+import { getInstanceAccount, getInstanceUri } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-const ComposePostingAs = React.memo(
-  () => {
+const ComposePostingAs = () => {
   const { t } = useTranslation('screenCompose')
   const { colors } = useTheme()
 
-    const instanceAccount = useSelector(
-      getInstanceAccount,
-      (prev, next) => prev?.acct === next?.acct
-    )
+  const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev?.acct === next?.acct)
   const instanceUri = useSelector(getInstanceUri)
 
   return (
@@ -27,8 +20,6 @@ const ComposePostingAs = React.memo(
       })}
     </CustomText>
   )
-  },
-  () => true
-)
+}
 
 export default ComposePostingAs

src/screens/Tabs.tsx

@@ -16,8 +16,7 @@ import TabPublic from './Tabs/Public'
 
 const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
 
-const ScreenTabs = React.memo(
-  ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
+const ScreenTabs = ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
   const { colors } = useTheme()
 
   const instanceActive = useSelector(getInstanceActive)
@@ -111,8 +110,6 @@ const ScreenTabs = React.memo(
       <Tab.Screen name='Tab-Me' component={TabMe} listeners={meListeners} />
     </Tab.Navigator>
   )
-  },
-  () => true
-)
+}
 
 export default ScreenTabs

src/screens/Tabs/Me/Bookmarks.tsx

@@ -3,22 +3,17 @@ import TimelineDefault from '@components/Timeline/Default'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React from 'react'
 
-const TabMeBookmarks = React.memo(
-  () => {
+const TabMeBookmarks = () => {
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Bookmarks' }]
 
   return (
     <Timeline
       queryKey={queryKey}
       customProps={{
-          renderItem: ({ item }) => (
-            <TimelineDefault item={item} queryKey={queryKey} />
-          )
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
       }}
     />
   )
-  },
-  () => true
-)
+}
 
 export default TabMeBookmarks

src/screens/Tabs/Me/Cconversations.tsx

@@ -3,22 +3,17 @@ import TimelineConversation from '@components/Timeline/Conversation'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React from 'react'
 
-const TabMeConversations = React.memo(
-  () => {
+const TabMeConversations = () => {
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Conversations' }]
 
   return (
     <Timeline
       queryKey={queryKey}
       customProps={{
-          renderItem: ({ item }) => (
-            <TimelineConversation conversation={item} queryKey={queryKey} />
-          )
+        renderItem: ({ item }) => <TimelineConversation conversation={item} queryKey={queryKey} />
       }}
     />
   )
-  },
-  () => true
-)
+}
 
 export default TabMeConversations

src/screens/Tabs/Me/Favourites.tsx

@@ -3,22 +3,17 @@ import TimelineDefault from '@components/Timeline/Default'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React from 'react'
 
-const TabMeFavourites = React.memo(
-  () => {
+const TabMeFavourites = () => {
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Favourites' }]
 
   return (
     <Timeline
       queryKey={queryKey}
       customProps={{
-          renderItem: ({ item }) => (
-            <TimelineDefault item={item} queryKey={queryKey} />
-          )
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
       }}
     />
   )
-  },
-  () => true
-)
+}
 
 export default TabMeFavourites

src/screens/Tabs/Shared/Account/Nav.tsx

@@ -12,8 +12,7 @@ export interface Props {
   account: Mastodon.Account | undefined
 }
 
-const AccountNav = React.memo(
-  ({ scrollY, account }: Props) => {
+const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
   const { colors } = useTheme()
   const headerHeight = useSafeAreaInsets().top + 44
 
@@ -69,8 +68,6 @@ const AccountNav = React.memo(
       </View>
     </Animated.View>
   )
-  },
-  (_, next) => next.account === undefined
-)
+}
 
 export default AccountNav