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,55 +12,44 @@ export interface Props {
   potentialWidth?: number
 }
 
-const InstanceInfo = React.memo(
-  ({ style, header, content, potentialWidth }: Props) => {
-    const { colors } = useTheme()
+const InstanceInfo: React.FC<Props> = ({ style, header, content, potentialWidth }) => {
+  const { colors } = useTheme()
 
-    return (
-      <View
-        style={[
-          {
-            flex: 1,
-            marginTop: StyleConstants.Spacing.M,
-            paddingLeft: StyleConstants.Spacing.Global.PagePadding,
-            paddingRight: StyleConstants.Spacing.Global.PagePadding
-          },
-          style
-        ]}
-        accessible
-      >
-        <CustomText
-          fontStyle='S'
-          style={{
-            marginBottom: StyleConstants.Spacing.XS,
-            color: colors.primaryDefault
-          }}
-          fontWeight='Bold'
-          children={header}
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          marginTop: StyleConstants.Spacing.M,
+          paddingLeft: StyleConstants.Spacing.Global.PagePadding,
+          paddingRight: StyleConstants.Spacing.Global.PagePadding
+        },
+        style
+      ]}
+      accessible
+    >
+      <CustomText
+        fontStyle='S'
+        style={{
+          marginBottom: StyleConstants.Spacing.XS,
+          color: colors.primaryDefault
+        }}
+        fontWeight='Bold'
+        children={header}
+      />
+      {content ? (
+        <CustomText fontStyle='M' style={{ color: colors.primaryDefault }} children={content} />
+      ) : (
+        <PlaceholderLine
+          width={potentialWidth ? potentialWidth * StyleConstants.Font.Size.M : undefined}
+          height={StyleConstants.Font.LineHeight.M}
+          color={colors.shimmerDefault}
+          noMargin
+          style={{ borderRadius: 0 }}
         />
-        {content ? (
-          <CustomText
-            fontStyle='M'
-            style={{ color: colors.primaryDefault }}
-            children={content}
-          />
-        ) : (
-          <PlaceholderLine
-            width={
-              potentialWidth
-                ? potentialWidth * StyleConstants.Font.Size.M
-                : undefined
-            }
-            height={StyleConstants.Font.LineHeight.M}
-            color={colors.shimmerDefault}
-            noMargin
-            style={{ borderRadius: 0 }}
-          />
-        )}
-      </View>
-    )
-  },
-  (prev, next) => prev.content === next.content
-)
+      )}
+    </View>
+  )
+}
 
 export default InstanceInfo

src/components/Timeline/Empty.tsx

@@ -13,74 +13,71 @@ export interface Props {
   queryKey: QueryKeyTimeline
 }
 
-const TimelineEmpty = React.memo(
-  ({ queryKey }: Props) => {
-    const { status, refetch } = useTimelineQuery({
-      ...queryKey[1],
-      options: { notifyOnChangeProps: ['status'] }
-    })
+const TimelineEmpty: React.FC<Props> = ({ queryKey }) => {
+  const { status, refetch } = useTimelineQuery({
+    ...queryKey[1],
+    options: { notifyOnChangeProps: ['status'] }
+  })
 
-    const { colors } = useTheme()
-    const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
+  const { t } = useTranslation('componentTimeline')
 
-    const children = () => {
-      switch (status) {
-        case 'loading':
-          return <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
-        case 'error':
-          return (
-            <>
-              <Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
-              <CustomText
-                fontStyle='M'
-                style={{
-                  marginTop: StyleConstants.Spacing.S,
-                  marginBottom: StyleConstants.Spacing.L,
-                  color: colors.primaryDefault
-                }}
-              >
-                {t('empty.error.message')}
-              </CustomText>
-              <Button type='text' content={t('empty.error.button')} onPress={() => refetch()} />
-            </>
-          )
-        case 'success':
-          return (
-            <>
-              <Icon
-                name='Smartphone'
-                size={StyleConstants.Font.Size.L}
-                color={colors.primaryDefault}
-              />
-              <CustomText
-                fontStyle='M'
-                style={{
-                  marginTop: StyleConstants.Spacing.S,
-                  marginBottom: StyleConstants.Spacing.L,
-                  color: colors.secondary
-                }}
-              >
-                {t('empty.success.message')}
-              </CustomText>
-            </>
-          )
-      }
+  const children = () => {
+    switch (status) {
+      case 'loading':
+        return <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+      case 'error':
+        return (
+          <>
+            <Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
+            <CustomText
+              fontStyle='M'
+              style={{
+                marginTop: StyleConstants.Spacing.S,
+                marginBottom: StyleConstants.Spacing.L,
+                color: colors.primaryDefault
+              }}
+            >
+              {t('empty.error.message')}
+            </CustomText>
+            <Button type='text' content={t('empty.error.button')} onPress={() => refetch()} />
+          </>
+        )
+      case 'success':
+        return (
+          <>
+            <Icon
+              name='Smartphone'
+              size={StyleConstants.Font.Size.L}
+              color={colors.primaryDefault}
+            />
+            <CustomText
+              fontStyle='M'
+              style={{
+                marginTop: StyleConstants.Spacing.S,
+                marginBottom: StyleConstants.Spacing.L,
+                color: colors.secondary
+              }}
+            >
+              {t('empty.success.message')}
+            </CustomText>
+          </>
+        )
     }
-    return (
-      <View
-        style={{
-          flex: 1,
-          minHeight: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: colors.backgroundDefault
-        }}
-      >
-        {children()}
-      </View>
-    )
-  },
-  () => true
-)
+  }
+  return (
+    <View
+      style={{
+        flex: 1,
+        minHeight: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: colors.backgroundDefault
+      }}
+    >
+      {children()}
+    </View>
+  )
+}
 
 export default TimelineEmpty

src/components/Timeline/Footer.tsx

@@ -13,50 +13,47 @@ export interface Props {
   disableInfinity: boolean
 }
 
-const TimelineFooter = React.memo(
-  ({ queryKey, disableInfinity }: Props) => {
-    const { hasNextPage } = useTimelineQuery({
-      ...queryKey[1],
-      options: {
-        enabled: !disableInfinity,
-        notifyOnChangeProps: ['hasNextPage'],
-        getNextPageParam: lastPage =>
-          lastPage?.links?.next && {
-            ...(lastPage.links.next.isOffset
-              ? { offset: lastPage.links.next.id }
-              : { max_id: lastPage.links.next.id })
-          }
-      }
-    })
+const TimelineFooter: React.FC<Props> = ({ queryKey, disableInfinity }) => {
+  const { hasNextPage } = useTimelineQuery({
+    ...queryKey[1],
+    options: {
+      enabled: !disableInfinity,
+      notifyOnChangeProps: ['hasNextPage'],
+      getNextPageParam: lastPage =>
+        lastPage?.links?.next && {
+          ...(lastPage.links.next.isOffset
+            ? { offset: lastPage.links.next.id }
+            : { max_id: lastPage.links.next.id })
+        }
+    }
+  })
 
-    const { colors } = useTheme()
+  const { colors } = useTheme()
 
-    return (
-      <View
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          justifyContent: 'center',
-          padding: StyleConstants.Spacing.M
-        }}
-      >
-        {!disableInfinity && hasNextPage ? (
-          <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
-        ) : (
-          <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-            <Trans
-              ns='componentTimeline'
-              i18nKey='end.message'
-              components={[
-                <Icon name='Coffee' size={StyleConstants.Font.Size.S} color={colors.secondary} />
-              ]}
-            />
-          </CustomText>
-        )}
-      </View>
-    )
-  },
-  () => true
-)
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: StyleConstants.Spacing.M
+      }}
+    >
+      {!disableInfinity && hasNextPage ? (
+        <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+      ) : (
+        <CustomText fontStyle='S' style={{ color: colors.secondary }}>
+          <Trans
+            ns='componentTimeline'
+            i18nKey='end.message'
+            components={[
+              <Icon name='Coffee' size={StyleConstants.Font.Size.S} color={colors.secondary} />
+            ]}
+          />
+        </CustomText>
+      )}
+    </View>
+  )
+}
 
 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,31 +9,28 @@ export interface Props {
   application?: Mastodon.Application
 }
 
-const HeaderSharedApplication = React.memo(
-  ({ application }: Props) => {
-    const { colors } = useTheme()
-    const { t } = useTranslation('componentTimeline')
+const HeaderSharedApplication: React.FC<Props> = ({ application }) => {
+  const { colors } = useTheme()
+  const { t } = useTranslation('componentTimeline')
 
-    return application && application.name !== 'Web' ? (
-      <CustomText
-        fontStyle='S'
-        accessibilityRole='link'
-        onPress={async () => {
-          application.website && (await openLink(application.website))
-        }}
-        style={{
-          marginLeft: StyleConstants.Spacing.S,
-          color: colors.secondary
-        }}
-        numberOfLines={1}
-      >
-        {t('shared.header.shared.application', {
-          application: application.name
-        })}
-      </CustomText>
-    ) : null
-  },
-  () => true
-)
+  return application && application.name !== 'Web' ? (
+    <CustomText
+      fontStyle='S'
+      accessibilityRole='link'
+      onPress={async () => {
+        application.website && (await openLink(application.website))
+      }}
+      style={{
+        marginLeft: StyleConstants.Spacing.S,
+        color: colors.secondary
+      }}
+      numberOfLines={1}
+    >
+      {t('shared.header.shared.application', {
+        application: application.name
+      })}
+    </CustomText>
+  ) : null
+}
 
 export default HeaderSharedApplication

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

@@ -13,43 +13,34 @@ export interface Props {
   highlighted?: boolean
 }
 
-const HeaderSharedCreated = React.memo(
-  ({ created_at, edited_at, highlighted = false }: Props) => {
-    const { t } = useTranslation('componentTimeline')
-    const { colors } = useTheme()
+const HeaderSharedCreated: React.FC<Props> = ({ created_at, edited_at, highlighted = false }) => {
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
 
-    const actualTime = edited_at || created_at
+  const actualTime = edited_at || created_at
 
-    return (
-      <>
-        <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-          {highlighted ? (
-            <>
-              <FormattedDate
-                value={new Date(actualTime)}
-                dateStyle='medium'
-                timeStyle='short'
-              />
-            </>
-          ) : (
-            <RelativeTime time={actualTime} />
-          )}
-        </CustomText>
-        {edited_at ? (
-          <Icon
-            accessibilityLabel={t(
-              'shared.header.shared.edited.accessibilityLabel'
-            )}
-            name='Edit'
-            size={StyleConstants.Font.Size.S}
-            color={colors.secondary}
-            style={{ marginLeft: StyleConstants.Spacing.S }}
-          />
-        ) : null}
-      </>
-    )
-  },
-  (prev, next) => prev.edited_at === next.edited_at
-)
+  return (
+    <>
+      <CustomText fontStyle='S' style={{ color: colors.secondary }}>
+        {highlighted ? (
+          <>
+            <FormattedDate value={new Date(actualTime)} dateStyle='medium' timeStyle='short' />
+          </>
+        ) : (
+          <RelativeTime time={actualTime} />
+        )}
+      </CustomText>
+      {edited_at ? (
+        <Icon
+          accessibilityLabel={t('shared.header.shared.edited.accessibilityLabel')}
+          name='Edit'
+          size={StyleConstants.Font.Size.S}
+          color={colors.secondary}
+          style={{ marginLeft: StyleConstants.Spacing.S }}
+        />
+      ) : null}
+    </>
+  )
+}
 
 export default HeaderSharedCreated

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

@@ -3,34 +3,24 @@ 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 { t } = useTranslation('componentTimeline')
-    const { colors } = useTheme()
+const HeaderSharedMuted: React.FC<Props> = ({ muted }) => {
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
 
-    return muted ? (
-      <Icon
-        accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
-        name='VolumeX'
-        size={StyleConstants.Font.Size.S}
-        color={colors.secondary}
-        style={styles.visibility}
-      />
-    ) : null
-  },
-  () => true
-)
-
-const styles = StyleSheet.create({
-  visibility: {
-    marginLeft: StyleConstants.Spacing.S
-  }
-})
+  return muted ? (
+    <Icon
+      accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
+      name='VolumeX'
+      size={StyleConstants.Font.Size.M}
+      color={colors.secondary}
+      style={{ marginLeft: StyleConstants.Spacing.S }}
+    />
+  ) : null
+}
 
 export default HeaderSharedMuted

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

@@ -9,48 +9,45 @@ export interface Props {
   visibility: Mastodon.Status['visibility']
 }
 
-const HeaderSharedVisibility = React.memo(
-  ({ visibility }: Props) => {
-    const { t } = useTranslation('componentTimeline')
-    const { colors } = useTheme()
+const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
 
-    switch (visibility) {
-      case 'unlisted':
-        return (
-          <Icon
-            accessibilityLabel={t('shared.header.shared.visibility.private.accessibilityLabel')}
-            name='Unlock'
-            size={StyleConstants.Font.Size.S}
-            color={colors.secondary}
-            style={styles.visibility}
-          />
-        )
-      case 'private':
-        return (
-          <Icon
-            accessibilityLabel={t('shared.header.shared.visibility.private.accessibilityLabel')}
-            name='Lock'
-            size={StyleConstants.Font.Size.S}
-            color={colors.secondary}
-            style={styles.visibility}
-          />
-        )
-      case 'direct':
-        return (
-          <Icon
-            accessibilityLabel={t('shared.header.shared.visibility.direct.accessibilityLabel')}
-            name='Mail'
-            size={StyleConstants.Font.Size.S}
-            color={colors.secondary}
-            style={styles.visibility}
-          />
-        )
-      default:
-        return null
-    }
-  },
-  () => true
-)
+  switch (visibility) {
+    case 'unlisted':
+      return (
+        <Icon
+          accessibilityLabel={t('shared.header.shared.visibility.private.accessibilityLabel')}
+          name='Unlock'
+          size={StyleConstants.Font.Size.S}
+          color={colors.secondary}
+          style={styles.visibility}
+        />
+      )
+    case 'private':
+      return (
+        <Icon
+          accessibilityLabel={t('shared.header.shared.visibility.private.accessibilityLabel')}
+          name='Lock'
+          size={StyleConstants.Font.Size.S}
+          color={colors.secondary}
+          style={styles.visibility}
+        />
+      )
+    case 'direct':
+      return (
+        <Icon
+          accessibilityLabel={t('shared.header.shared.visibility.direct.accessibilityLabel')}
+          name='Mail'
+          size={StyleConstants.Font.Size.S}
+          color={colors.secondary}
+          style={styles.visibility}
+        />
+      )
+    default:
+      return null
+  }
+}
 
 const styles = StyleSheet.create({
   visibility: {

src/screens/Compose/Posting.tsx

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

src/screens/Compose/Root.tsx

@@ -17,87 +17,84 @@ import { getInstanceConfigurationStatusCharsURL } from '@utils/slices/instancesS
 
 export let instanceConfigurationStatusCharsURL = 23
 
-const ComposeRoot = React.memo(
-  () => {
-    const { colors } = useTheme()
+const ComposeRoot = () => {
+  const { colors } = useTheme()
 
-    instanceConfigurationStatusCharsURL = useSelector(
-      getInstanceConfigurationStatusCharsURL,
-      () => true
-    )
+  instanceConfigurationStatusCharsURL = useSelector(
+    getInstanceConfigurationStatusCharsURL,
+    () => true
+  )
 
-    const accessibleRefDrafts = useRef(null)
-    const accessibleRefAttachments = useRef(null)
+  const accessibleRefDrafts = useRef(null)
+  const accessibleRefAttachments = useRef(null)
 
-    useEffect(() => {
-      const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
-      tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
-    }, [accessibleRefDrafts.current])
+  useEffect(() => {
+    const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
+    tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
+  }, [accessibleRefDrafts.current])
 
-    const { composeState } = useContext(ComposeContext)
+  const { composeState } = useContext(ComposeContext)
 
-    const mapSchemaToType = () => {
-      if (composeState.tag) {
-        switch (composeState.tag?.schema) {
-          case '@':
-            return 'accounts'
-          case '#':
-            return 'hashtags'
-        }
-      } else {
-        return undefined
+  const mapSchemaToType = () => {
+    if (composeState.tag) {
+      switch (composeState.tag?.schema) {
+        case '@':
+          return 'accounts'
+        case '#':
+          return 'hashtags'
       }
+    } else {
+      return undefined
     }
-    const { isFetching, data, refetch } = useSearchQuery({
-      type: mapSchemaToType(),
-      term: composeState.tag?.raw.substring(1),
-      options: { enabled: false }
-    })
+  }
+  const { isFetching, data, refetch } = useSearchQuery({
+    type: mapSchemaToType(),
+    term: composeState.tag?.raw.substring(1),
+    options: { enabled: false }
+  })
 
-    useEffect(() => {
-      if (
-        (composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
-        composeState.tag?.raw
-      ) {
-        refetch()
-      }
-    }, [composeState.tag])
+  useEffect(() => {
+    if (
+      (composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
+      composeState.tag?.raw
+    ) {
+      refetch()
+    }
+  }, [composeState.tag])
 
-    const listEmpty = useMemo(() => {
-      if (isFetching) {
-        return (
-          <View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
-            <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
-          </View>
-        )
-      }
-    }, [isFetching])
+  const listEmpty = useMemo(() => {
+    if (isFetching) {
+      return (
+        <View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
+          <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+        </View>
+      )
+    }
+  }, [isFetching])
 
-    const Footer = useMemo(
-      () => <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />,
-      [accessibleRefAttachments.current]
-    )
+  const Footer = useMemo(
+    () => <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />,
+    [accessibleRefAttachments.current]
+  )
 
-    return (
-      <View style={{ flex: 1 }}>
-        <FlatList
-          renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
-          ListEmptyComponent={listEmpty}
-          keyboardShouldPersistTaps='always'
-          ListHeaderComponent={ComposeRootHeader}
-          ListFooterComponent={Footer}
-          ItemSeparatorComponent={ComponentSeparator}
-          // @ts-ignore
-          data={data ? data[mapSchemaToType()] : undefined}
-          keyExtractor={() => Math.random().toString()}
-        />
-        <ComposeActions />
-        <ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
-        <ComposePosting />
-      </View>
-    )
-  },
-  () => true
-)
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
+        ListEmptyComponent={listEmpty}
+        keyboardShouldPersistTaps='always'
+        ListHeaderComponent={ComposeRootHeader}
+        ListFooterComponent={Footer}
+        ItemSeparatorComponent={ComponentSeparator}
+        // @ts-ignore
+        data={data ? data[mapSchemaToType()] : undefined}
+        keyExtractor={() => Math.random().toString()}
+      />
+      <ComposeActions />
+      <ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
+      <ComposePosting />
+    </View>
+  )
+}
 
 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,34 +1,25 @@
 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 { t } = useTranslation('screenCompose')
-    const { colors } = useTheme()
+const ComposePostingAs = () => {
+  const { t } = useTranslation('screenCompose')
+  const { colors } = useTheme()
 
-    const instanceAccount = useSelector(
-      getInstanceAccount,
-      (prev, next) => prev?.acct === next?.acct
-    )
-    const instanceUri = useSelector(getInstanceUri)
+  const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev?.acct === next?.acct)
+  const instanceUri = useSelector(getInstanceUri)
 
-    return (
-      <CustomText fontStyle='S' style={{ color: colors.secondary }}>
-        {t('content.root.header.postingAs', {
-          acct: instanceAccount?.acct,
-          domain: instanceUri
-        })}
-      </CustomText>
-    )
-  },
-  () => true
-)
+  return (
+    <CustomText fontStyle='S' style={{ color: colors.secondary }}>
+      {t('content.root.header.postingAs', {
+        acct: instanceAccount?.acct,
+        domain: instanceUri
+      })}
+    </CustomText>
+  )
+}
 
 export default ComposePostingAs

src/screens/Tabs.tsx

@@ -16,103 +16,100 @@ import TabPublic from './Tabs/Public'
 
 const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
 
-const ScreenTabs = React.memo(
-  ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
-    const { colors } = useTheme()
+const ScreenTabs = ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
+  const { colors } = useTheme()
 
-    const instanceActive = useSelector(getInstanceActive)
-    const instanceAccount = useSelector(
-      getInstanceAccount,
-      (prev, next) => prev?.avatarStatic === next?.avatarStatic
-    )
+  const instanceActive = useSelector(getInstanceActive)
+  const instanceAccount = useSelector(
+    getInstanceAccount,
+    (prev, next) => prev?.avatarStatic === next?.avatarStatic
+  )
 
-    const composeListeners = useMemo(
-      () => ({
-        tabPress: (e: any) => {
-          e.preventDefault()
-          haptics('Light')
-          navigation.navigate('Screen-Compose')
-        }
-      }),
-      []
-    )
-    const composeComponent = useCallback(() => null, [])
+  const composeListeners = useMemo(
+    () => ({
+      tabPress: (e: any) => {
+        e.preventDefault()
+        haptics('Light')
+        navigation.navigate('Screen-Compose')
+      }
+    }),
+    []
+  )
+  const composeComponent = useCallback(() => null, [])
 
-    const meListeners = useMemo(
-      () => ({
-        tabLongPress: () => {
-          haptics('Light')
-          //@ts-ignore
-          navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
-          //@ts-ignore
-          navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
-        }
-      }),
-      []
-    )
+  const meListeners = useMemo(
+    () => ({
+      tabLongPress: () => {
+        haptics('Light')
+        //@ts-ignore
+        navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
+        //@ts-ignore
+        navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
+      }
+    }),
+    []
+  )
 
-    const previousTab = useSelector(getPreviousTab, () => true)
+  const previousTab = useSelector(getPreviousTab, () => true)
 
-    return (
-      <Tab.Navigator
-        initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'}
-        screenOptions={({ route }) => ({
-          headerShown: false,
-          tabBarActiveTintColor: colors.primaryDefault,
-          tabBarInactiveTintColor: colors.secondary,
-          tabBarShowLabel: false,
-          ...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
-          tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
-          tabBarIcon: ({
-            focused,
-            color,
-            size
-          }: {
-            focused: boolean
-            color: string
-            size: number
-          }) => {
-            switch (route.name) {
-              case 'Tab-Local':
-                return <Icon name='Home' size={size} color={color} />
-              case 'Tab-Public':
-                return <Icon name='Globe' size={size} color={color} />
-              case 'Tab-Compose':
-                return <Icon name='Plus' size={size} color={color} />
-              case 'Tab-Notifications':
-                return <Icon name='Bell' size={size} color={color} />
-              case 'Tab-Me':
-                return (
-                  <GracefullyImage
-                    key={instanceAccount?.avatarStatic}
-                    uri={{ original: instanceAccount?.avatarStatic }}
-                    dimension={{
-                      width: size,
-                      height: size
-                    }}
-                    style={{
-                      borderRadius: size,
-                      overflow: 'hidden',
-                      borderWidth: focused ? 2 : 0,
-                      borderColor: focused ? colors.secondary : color
-                    }}
-                  />
-                )
-              default:
-                return <Icon name='AlertOctagon' size={size} color={color} />
-            }
+  return (
+    <Tab.Navigator
+      initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'}
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarActiveTintColor: colors.primaryDefault,
+        tabBarInactiveTintColor: colors.secondary,
+        tabBarShowLabel: false,
+        ...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
+        tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
+        tabBarIcon: ({
+          focused,
+          color,
+          size
+        }: {
+          focused: boolean
+          color: string
+          size: number
+        }) => {
+          switch (route.name) {
+            case 'Tab-Local':
+              return <Icon name='Home' size={size} color={color} />
+            case 'Tab-Public':
+              return <Icon name='Globe' size={size} color={color} />
+            case 'Tab-Compose':
+              return <Icon name='Plus' size={size} color={color} />
+            case 'Tab-Notifications':
+              return <Icon name='Bell' size={size} color={color} />
+            case 'Tab-Me':
+              return (
+                <GracefullyImage
+                  key={instanceAccount?.avatarStatic}
+                  uri={{ original: instanceAccount?.avatarStatic }}
+                  dimension={{
+                    width: size,
+                    height: size
+                  }}
+                  style={{
+                    borderRadius: size,
+                    overflow: 'hidden',
+                    borderWidth: focused ? 2 : 0,
+                    borderColor: focused ? colors.secondary : color
+                  }}
+                />
+              )
+            default:
+              return <Icon name='AlertOctagon' size={size} color={color} />
           }
-        })}
-      >
-        <Tab.Screen name='Tab-Local' component={TabLocal} />
-        <Tab.Screen name='Tab-Public' component={TabPublic} />
-        <Tab.Screen name='Tab-Compose' component={composeComponent} listeners={composeListeners} />
-        <Tab.Screen name='Tab-Notifications' component={TabNotifications} />
-        <Tab.Screen name='Tab-Me' component={TabMe} listeners={meListeners} />
-      </Tab.Navigator>
-    )
-  },
-  () => true
-)
+        }
+      })}
+    >
+      <Tab.Screen name='Tab-Local' component={TabLocal} />
+      <Tab.Screen name='Tab-Public' component={TabPublic} />
+      <Tab.Screen name='Tab-Compose' component={composeComponent} listeners={composeListeners} />
+      <Tab.Screen name='Tab-Notifications' component={TabNotifications} />
+      <Tab.Screen name='Tab-Me' component={TabMe} listeners={meListeners} />
+    </Tab.Navigator>
+  )
+}
 
 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 queryKey: QueryKeyTimeline = ['Timeline', { page: 'Bookmarks' }]
+const TabMeBookmarks = () => {
+  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Bookmarks' }]
 
-    return (
-      <Timeline
-        queryKey={queryKey}
-        customProps={{
-          renderItem: ({ item }) => (
-            <TimelineDefault item={item} queryKey={queryKey} />
-          )
-        }}
-      />
-    )
-  },
-  () => true
-)
+  return (
+    <Timeline
+      queryKey={queryKey}
+      customProps={{
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
+      }}
+    />
+  )
+}
 
 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 queryKey: QueryKeyTimeline = ['Timeline', { page: 'Conversations' }]
+const TabMeConversations = () => {
+  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Conversations' }]
 
-    return (
-      <Timeline
-        queryKey={queryKey}
-        customProps={{
-          renderItem: ({ item }) => (
-            <TimelineConversation conversation={item} queryKey={queryKey} />
-          )
-        }}
-      />
-    )
-  },
-  () => true
-)
+  return (
+    <Timeline
+      queryKey={queryKey}
+      customProps={{
+        renderItem: ({ item }) => <TimelineConversation conversation={item} queryKey={queryKey} />
+      }}
+    />
+  )
+}
 
 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 queryKey: QueryKeyTimeline = ['Timeline', { page: 'Favourites' }]
+const TabMeFavourites = () => {
+  const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Favourites' }]
 
-    return (
-      <Timeline
-        queryKey={queryKey}
-        customProps={{
-          renderItem: ({ item }) => (
-            <TimelineDefault item={item} queryKey={queryKey} />
-          )
-        }}
-      />
-    )
-  },
-  () => true
-)
+  return (
+    <Timeline
+      queryKey={queryKey}
+      customProps={{
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
+      }}
+    />
+  )
+}
 
 export default TabMeFavourites

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

@@ -12,65 +12,62 @@ export interface Props {
   account: Mastodon.Account | undefined
 }
 
-const AccountNav = React.memo(
-  ({ scrollY, account }: Props) => {
-    const { colors } = useTheme()
-    const headerHeight = useSafeAreaInsets().top + 44
+const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
+  const { colors } = useTheme()
+  const headerHeight = useSafeAreaInsets().top + 44
 
-    const nameY =
-      Dimensions.get('window').width / 3 +
-      StyleConstants.Avatar.L -
-      StyleConstants.Spacing.Global.PagePadding * 2 +
-      StyleConstants.Spacing.M -
-      headerHeight
+  const nameY =
+    Dimensions.get('window').width / 3 +
+    StyleConstants.Avatar.L -
+    StyleConstants.Spacing.Global.PagePadding * 2 +
+    StyleConstants.Spacing.M -
+    headerHeight
 
-    const styleOpacity = useAnimatedStyle(() => {
-      return {
-        opacity: interpolate(scrollY.value, [0, 200], [0, 1], Extrapolate.CLAMP)
-      }
-    })
-    const styleMarginTop = useAnimatedStyle(() => {
-      return {
-        marginTop: interpolate(scrollY.value, [nameY, nameY + 20], [50, 0], Extrapolate.CLAMP)
-      }
-    })
+  const styleOpacity = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(scrollY.value, [0, 200], [0, 1], Extrapolate.CLAMP)
+    }
+  })
+  const styleMarginTop = useAnimatedStyle(() => {
+    return {
+      marginTop: interpolate(scrollY.value, [nameY, nameY + 20], [50, 0], Extrapolate.CLAMP)
+    }
+  })
 
-    return (
-      <Animated.View
-        style={[
-          styleOpacity,
-          {
-            ...StyleSheet.absoluteFillObject,
-            zIndex: 99,
-            backgroundColor: colors.backgroundDefault,
-            height: headerHeight
-          }
-        ]}
+  return (
+    <Animated.View
+      style={[
+        styleOpacity,
+        {
+          ...StyleSheet.absoluteFillObject,
+          zIndex: 99,
+          backgroundColor: colors.backgroundDefault,
+          height: headerHeight
+        }
+      ]}
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          overflow: 'hidden',
+          marginTop: useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
+        }}
       >
-        <View
-          style={{
-            flex: 1,
-            alignItems: 'center',
-            overflow: 'hidden',
-            marginTop: useSafeAreaInsets().top + (44 - StyleConstants.Font.Size.L) / 2
-          }}
-        >
-          <Animated.View style={[{ flexDirection: 'row' }, styleMarginTop]}>
-            {account ? (
-              <CustomText numberOfLines={1}>
-                <ParseEmojis
-                  content={account.display_name || account.username}
-                  emojis={account.emojis}
-                  fontBold
-                />
-              </CustomText>
-            ) : null}
-          </Animated.View>
-        </View>
-      </Animated.View>
-    )
-  },
-  (_, next) => next.account === undefined
-)
+        <Animated.View style={[{ flexDirection: 'row' }, styleMarginTop]}>
+          {account ? (
+            <CustomText numberOfLines={1}>
+              <ParseEmojis
+                content={account.display_name || account.username}
+                emojis={account.emojis}
+                fontBold
+              />
+            </CustomText>
+          ) : null}
+        </Animated.View>
+      </View>
+    </Animated.View>
+  )
+}
 
 export default AccountNav