mirror of https://github.com/tooot-app/app
Remove most React memo
Maybe would solve iOS out of memory crashes
This commit is contained in:
parent
1e0e8842db
commit
b6045e5121
|
@ -331,4 +331,4 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default React.memo(Screens, () => true)
|
export default Screens
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 ? (
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -292,4 +292,4 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default React.memo(ComposeAttachments, () => true)
|
export default ComposeAttachments
|
||||||
|
|
|
@ -31,4 +31,4 @@ const ComposeReply: React.FC = () => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default React.memo(ComposeReply, () => true)
|
export default ComposeReply
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue