Remove most React memo

Maybe would solve iOS out of memory crashes
This commit is contained in:
xmflsct 2022-12-24 01:18:20 +01:00
parent 1e0e8842db
commit b6045e5121
19 changed files with 517 additions and 600 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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