Re-rendering improvements for like/unlike (#2180)

* Add a few memos

* Memo PostDropdownBtn better

* More memo

* More granularity

* Extract PostContent

* Fix a usage I missed

* oops

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {memo, useCallback} from 'react'
 import {
   StyleProp,
   StyleSheet,
@@ -27,7 +27,7 @@ import {useComposerControls} from '#/state/shell/composer'
 import {Shadow} from '#/state/cache/types'
 import {useRequireAuth} from '#/state/session'
 
-export function PostCtrls({
+let PostCtrls = ({
   big,
   post,
   record,
@@ -39,7 +39,7 @@ export function PostCtrls({
   record: AppBskyFeedPost.Record
   style?: StyleProp<ViewStyle>
   onPressReply: () => void
-}) {
+}): React.ReactNode => {
   const theme = useTheme()
   const {openComposer} = useComposerControls()
   const {closeModal} = useModalControls()
@@ -71,7 +71,14 @@ export function PostCtrls({
         likeCount: post.likeCount || 0,
       })
     }
-  }, [post, postLikeMutation, postUnlikeMutation])
+  }, [
+    post.viewer?.like,
+    post.uri,
+    post.cid,
+    post.likeCount,
+    postLikeMutation,
+    postUnlikeMutation,
+  ])
 
   const onRepost = useCallback(() => {
     closeModal()
@@ -89,7 +96,15 @@ export function PostCtrls({
         repostCount: post.repostCount || 0,
       })
     }
-  }, [post, closeModal, postRepostMutation, postUnrepostMutation])
+  }, [
+    post.uri,
+    post.cid,
+    post.viewer?.repost,
+    post.repostCount,
+    closeModal,
+    postRepostMutation,
+    postUnrepostMutation,
+  ])
 
   const onQuote = useCallback(() => {
     closeModal()
@@ -103,7 +118,16 @@ export function PostCtrls({
       },
     })
     Haptics.default()
-  }, [post, record, openComposer, closeModal])
+  }, [
+    post.uri,
+    post.cid,
+    post.author,
+    post.indexedAt,
+    record.text,
+    openComposer,
+    closeModal,
+  ])
+
   return (
     <View style={[styles.ctrls, style]}>
       <TouchableOpacity
@@ -179,7 +203,9 @@ export function PostCtrls({
       {big ? undefined : (
         <PostDropdownBtn
           testID="postDropdownBtn"
-          post={post}
+          postAuthor={post.author}
+          postCid={post.cid}
+          postUri={post.uri}
           record={record}
           style={styles.ctrlPad}
         />
@@ -189,6 +215,8 @@ export function PostCtrls({
     </View>
   )
 }
+PostCtrls = memo(PostCtrls)
+export {PostCtrls}
 
 const styles = StyleSheet.create({
   ctrls: {

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {memo, useCallback} from 'react'
 import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
 import {RepostIcon} from 'lib/icons'
 import {s, colors} from 'lib/styles'
@@ -17,13 +17,13 @@ interface Props {
   onQuote: () => void
 }
 
-export const RepostButton = ({
+let RepostButton = ({
   isReposted,
   repostCount,
   big,
   onRepost,
   onQuote,
-}: Props) => {
+}: Props): React.ReactNode => {
   const theme = useTheme()
   const {openModal} = useModalControls()
   const requireAuth = useRequireAuth()
@@ -80,6 +80,8 @@ export const RepostButton = ({
     </TouchableOpacity>
   )
 }
+RepostButton = memo(RepostButton)
+export {RepostButton}
 
 const styles = StyleSheet.create({
   control: {