React.memo to all list items

frontend/packages/app/components/network-dialog.tsx

@@ -18,7 +18,7 @@ import {
   XStack,
   YStack,
 } from '@mintter/ui'
-import {useState} from 'react'
+import React, {useState} from 'react'
 import {ColorValue} from 'react-native'
 import {useAllAccounts} from '../models/accounts'
 import {
@@ -133,7 +133,13 @@ export function NetworkDialog() {
   )
 }
 
-function PeerRow({peer, account}: {peer: PeerInfo; account?: Account}) {
+const PeerRow = React.memo(function PeerRow({
+  peer,
+  account,
+}: {
+  peer: PeerInfo
+  account?: Account
+}) {
   const {id, addrs, connectionStatus} = peer
   const isSite =
     account?.profile?.bio === 'Hypermedia Site. Powered by Mintter.'
@@ -230,7 +236,7 @@ function PeerRow({peer, account}: {peer: PeerInfo; account?: Account}) {
       </XStack>
     </XStack>
   )
-}
+})
 
 function IndicationStatus({color}: {color: ColorValue}) {
   return (

frontend/packages/app/components/publication-list-item.tsx

@@ -15,13 +15,14 @@ import {
   XStack,
   copyTextToClipboard,
 } from '@mintter/ui'
+import React from 'react'
 import {NavRoute} from '../utils/routes'
 import {useNavigate} from '../utils/useNavigate'
 import {BaseAccountLinkAvatar} from './account-link-avatar'
 import {ListItem, TimeAccessory} from './list-item'
 import {MenuItemType} from './options-dropdown'
 
-export function PublicationListItem({
+export const PublicationListItem = React.memo(function PublicationListItem({
   publication,
   hasDraft,
   variants,
@@ -160,4 +161,4 @@ export function PublicationListItem({
       ]}
     />
   )
-}
+})

frontend/packages/app/pages/contacts-page.tsx

@@ -14,6 +14,7 @@ import {
   XStack,
   YStack,
 } from '@mintter/ui'
+import React from 'react'
 import {AccountTrustButton} from '../components/account-trust'
 import {Avatar} from '../components/avatar'
 import {OnlineIndicator} from '../components/indicator'
@@ -26,7 +27,12 @@ import {usePinAccount} from '../models/pins'
 import {getAvatarUrl} from '../utils/account-url'
 import {AccountRoute} from '../utils/routes'
 
-function ContactItem({account}: {account: Account; isTrusted: boolean}) {
+const ContactItem = React.memo(function ContactItem({
+  account,
+}: {
+  account: Account
+  isTrusted: boolean
+}) {
   const navigate = useNavigate()
   const spawn = useNavigate('spawn')
   const isConnected = useAccountIsConnected(account)
@@ -83,7 +89,7 @@ function ContactItem({account}: {account: Account; isTrusted: boolean}) {
       ]}
     />
   )
-}
+})
 
 function ErrorPage({}: {error: any}) {
   // todo, this!

frontend/packages/app/pages/feed.tsx

@@ -33,7 +33,7 @@ import {
   toast,
 } from '@mintter/ui'
 import {ArrowRight, ChevronUp, Verified} from '@tamagui/lucide-icons'
-import {PropsWithChildren, ReactNode, useRef} from 'react'
+import React, {PropsWithChildren, ReactNode, useRef} from 'react'
 import Footer from '../components/footer'
 import {MainWrapperNoScroll} from '../components/main-wrapper'
 import {useAccount} from '../models/accounts'
@@ -220,7 +220,7 @@ function FeedItemPublicationContent({
   publication: HMPublication
 }) {
   return (
-    <AppPublicationContentProvider>
+    <AppPublicationContentProvider renderOnly>
       <PublicationContent
         publication={publication}
         maxBlockCount={FEED_MAX_BLOCK_COUNT}
@@ -231,7 +231,7 @@ function FeedItemPublicationContent({
 
 function FeedItemCommentContent({comment}: {comment: HMComment}) {
   return (
-    <AppPublicationContentProvider>
+    <AppPublicationContentProvider renderOnly>
       <BlocksContent
         blocks={clipContentBlocks(comment.content, FEED_MAX_BLOCK_COUNT)}
       />
@@ -626,7 +626,7 @@ function ErrorFeedItem({message}: {message: string}) {
   )
 }
 
-function FeedItem({event}: {event: ActivityEvent}) {
+const FeedItem = React.memo(function FeedItem({event}: {event: ActivityEvent}) {
   const {data, eventTime} = event
   if (data.case === 'newBlob') {
     const {cid, author, resource, blobType} = data.value
@@ -653,9 +653,9 @@ function FeedItem({event}: {event: ActivityEvent}) {
     return <ErrorFeedItem message={`Unknown blob type: ${blobType}`} />
   }
   return <ErrorFeedItem message={`Unknown event type: ${event.data.case}`} />
-}
+})
 
-function Feed({tab}: {tab: 'trusted' | 'all'}) {
+const Feed = React.memo(function Feed({tab}: {tab: 'trusted' | 'all'}) {
   const feed = useFeedWithLatest(tab === 'trusted')
   const route = useNavRoute()
   const replace = useNavigate('replace')
@@ -726,4 +726,4 @@ function Feed({tab}: {tab: 'trusted' | 'all'}) {
       )}
     </YStack>
   )
-}
+})

frontend/packages/app/pages/groups.tsx

@@ -11,7 +11,7 @@ import {
   YStack,
 } from '@mintter/ui'
 import {Pin, PinOff} from '@tamagui/lucide-icons'
-import {useMemo} from 'react'
+import React, {useMemo} from 'react'
 import {AccountLinkAvatar} from '../components/account-link-avatar'
 import {
   ListItem,
@@ -118,7 +118,11 @@ function SiteUrlButton({group}: {group: Group}) {
   )
 }
 
-function GroupListItem({group}: {group: Group}) {
+const GroupListItem = React.memo(function GroupListItem({
+  group,
+}: {
+  group: Group
+}) {
   const navigate = useClickNavigate()
   const spawn = useNavigate('spawn')
   const groupMembers = useGroupMembers(group.id)
@@ -170,7 +174,7 @@ function GroupListItem({group}: {group: Group}) {
       ]}
     />
   )
-}
+})
 
 export default function GroupsPage() {
   const groupQuery = useGroups()

frontend/packages/app/pages/publication-list-page.tsx

@@ -29,7 +29,7 @@ import {
   BadgeCheck as Verified,
 } from '@tamagui/lucide-icons'
 import copyTextToClipboard from 'copy-text-to-clipboard'
-import {memo} from 'react'
+import React, {memo} from 'react'
 import {useAppContext} from '../app-context'
 import {DeleteDocumentDialog} from '../components/delete-dialog'
 import {useDeleteDraftDialog} from '../components/delete-draft-dialog'
@@ -260,7 +260,11 @@ function DraftsList() {
   )
 }
 
-function DraftListItem({draft}: {draft: Document}) {
+const DraftListItem = React.memo(function DraftListItem({
+  draft,
+}: {
+  draft: Document
+}) {
   let title = draft.title || 'Untitled Document'
   const deleteDialog = useDeleteDraftDialog()
   const navigate = useClickNavigate()
@@ -294,4 +298,4 @@ function DraftListItem({draft}: {draft: Document}) {
       {deleteDialog.content}
     </>
   )
-}
+})

frontend/packages/shared/src/publication-content.tsx

@@ -92,6 +92,7 @@ export type PublicationContentContextValue = {
   debug: boolean
   ffSerif?: boolean
   comment?: boolean
+  renderOnly?: boolean
 }
 
 export const publicationContentContext =
@@ -105,6 +106,7 @@ export function PublicationContentProvider({
   debugTop = 0,
   showDevMenu = false,
   comment = false,
+  renderOnly = false,
   ...PubContentContext
 }: PropsWithChildren<
   PublicationContentContextValue & {
@@ -126,6 +128,7 @@ export function PublicationContentProvider({
         debug,
         ffSerif,
         comment,
+        renderOnly,
       }}
     >
       {showDevMenu ? (
@@ -343,11 +346,10 @@ export function BlockNodeContent({
   childrenType?: HMBlockChildrenType | string
   embedDepth?: number
 }) {
-  const {layoutUnit} = usePublicationContentContext()
+  const {layoutUnit, renderOnly} = usePublicationContentContext()
   const headingMarginStyles = useHeadingMarginStyles(depth, layoutUnit)
   const {hover, ...hoverProps} = useHover()
   const {citations} = useBlockCitations(blockNode.block?.id)
-
   const {onCitationClick, onBlockComment, onCopyBlock, onReplyBlock, debug} =
     usePublicationContentContext()
 
@@ -377,6 +379,8 @@ export function BlockNodeContent({
 
   const isEmbed = blockNode.block?.type == 'embed'
 
+  const interactiveProps = !renderOnly ? hoverProps : {}
+
   return (
     <YStack
       className="blocknode-content"
@@ -399,8 +403,12 @@ export function BlockNodeContent({
           index={props.index}
           start={props.start}
         />
-        <BlockContent block={blockNode.block!} depth={depth} {...hoverProps} />
-        {!props.embedDepth ? (
+        <BlockContent
+          block={blockNode.block!}
+          depth={depth}
+          {...interactiveProps}
+        />
+        {!props.embedDepth && !renderOnly ? (
           <XStack
             position="absolute"
             top={layoutUnit / 4}
@@ -545,8 +553,8 @@ function inlineContentSize(unit: number): TextProps {
 export type BlockContentProps = {
   block: Block | HMBlock
   depth: number
-  onHoverIn: () => void
-  onHoverOut: () => void
+  onHoverIn?: () => void
+  onHoverOut?: () => void
 }
 
 function BlockContent(props: BlockContentProps) {