Add some memoization (#1947)

4 files changed, 18 insertions, 12 deletions

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 74bff1ab0..cd4560c13 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -1,4 +1,4 @@
-import React, {MutableRefObject} from 'react'
+import React, {memo, MutableRefObject} from 'react'
 import {
   ActivityIndicator,
   Dimensions,
@@ -31,7 +31,7 @@ const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 const ERROR_ITEM = {_reactKey: '__error__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
 
-export function Feed({
+let Feed = ({
   feed,
   feedParams,
   style,
@@ -65,7 +65,7 @@ export function Feed({
   desktopFixedHeightOffset?: number
   ListHeaderComponent?: () => JSX.Element
   extraData?: any
-}) {
+}): React.ReactNode => {
   const pal = usePalette('default')
   const theme = useTheme()
   const {track} = useAnalytics()
@@ -273,6 +273,8 @@ export function Feed({
     </View>
   )
 }
+Feed = memo(Feed)
+export {Feed}
 
 const styles = StyleSheet.create({
   feedFooter: {paddingTop: 20},
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 5bc173f00..786b879af 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react'
+import React, {memo, useMemo, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   AppBskyFeedDefs,
@@ -83,7 +83,7 @@ export function FeedItem({
   return null
 }
 
-function FeedItemInner({
+let FeedItemInner = ({
   post,
   record,
   reason,
@@ -101,7 +101,7 @@ function FeedItemInner({
   isThreadChild?: boolean
   isThreadLastChild?: boolean
   isThreadParent?: boolean
-}) {
+}): React.ReactNode => {
   const {openComposer} = useComposerControls()
   const pal = usePalette('default')
   const {track} = useAnalytics()
@@ -334,6 +334,7 @@ function FeedItemInner({
     </Link>
   )
 }
+FeedItemInner = memo(FeedItemInner)
 
 const styles = StyleSheet.create({
   outer: {
diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx
index 99ee38536..06f11aa64 100644
--- a/src/view/com/posts/FeedSlice.tsx
+++ b/src/view/com/posts/FeedSlice.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {memo} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {FeedPostSlice} from '#/state/queries/post-feed'
 import {AtUri, moderatePost, ModerationOpts} from '@atproto/api'
@@ -9,7 +9,7 @@ import {FeedItem} from './FeedItem'
 import {usePalette} from 'lib/hooks/usePalette'
 import {makeProfileLink} from 'lib/routes/links'
 
-export function FeedSlice({
+let FeedSlice = ({
   slice,
   dataUpdatedAt,
   ignoreFilterFor,
@@ -19,7 +19,7 @@ export function FeedSlice({
   dataUpdatedAt: number
   ignoreFilterFor?: string
   moderationOpts: ModerationOpts
-}) {
+}): React.ReactNode => {
   const moderations = React.useMemo(() => {
     return slice.items.map(item => moderatePost(item.post, moderationOpts))
   }, [slice, moderationOpts])
@@ -94,6 +94,8 @@ export function FeedSlice({
     </>
   )
 }
+FeedSlice = memo(FeedSlice)
+export {FeedSlice}
 
 function ViewFullThread({slice}: {slice: FeedPostSlice}) {
   const pal = usePalette('default')
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index a7e793ccb..ab6667816 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {memo} from 'react'
 import {
   StyleSheet,
   TouchableOpacity,
@@ -105,12 +105,12 @@ interface LoadedProps {
   isProfilePreview?: boolean
 }
 
-function ProfileHeaderLoaded({
+let ProfileHeaderLoaded = ({
   profile,
   moderation,
   hideBackButton = false,
   isProfilePreview,
-}: LoadedProps) {
+}: LoadedProps): React.ReactNode => {
   const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const {currentAccount} = useSession()
@@ -627,6 +627,7 @@ function ProfileHeaderLoaded({
     </View>
   )
 }
+ProfileHeaderLoaded = memo(ProfileHeaderLoaded)
 
 const styles = StyleSheet.create({
   banner: {