Remove most React memo

Maybe would solve iOS out of memory crashes
2025-06-05 22:19:13 +02:00 · 2022-12-24 01:18:20 +01:00
parent 1e0e8842db
commit b6045e5121
19 changed files with 517 additions and 600 deletions
--- a/src/components/Instance/Info.tsx
+++ b/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
--- a/src/components/Timeline/Empty.tsx
+++ b/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
--- a/src/components/Timeline/Footer.tsx
+++ b/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
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/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 ? (
--- a/src/components/Timeline/Shared/HeaderShared/Application.tsx
+++ b/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
--- a/src/components/Timeline/Shared/HeaderShared/Created.tsx
+++ b/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
--- a/src/components/Timeline/Shared/HeaderShared/Muted.tsx
+++ b/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
--- a/src/components/Timeline/Shared/HeaderShared/Visibility.tsx
+++ b/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: {