perf: optimize marketplace card re-renders with memoization (#29263)

web/app/components/plugins/card/base/download-count.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { RiInstallLine } from '@remixicon/react'
 import { formatNumber } from '@/utils/format'
 
@@ -5,7 +6,7 @@ type Props = {
   downloadCount: number
 }
 
-const DownloadCount = ({
+const DownloadCountComponent = ({
   downloadCount,
 }: Props) => {
   return (
@@ -16,4 +17,7 @@ const DownloadCount = ({
   )
 }
 
+// Memoize to prevent unnecessary re-renders
+const DownloadCount = React.memo(DownloadCountComponent)
+
 export default DownloadCount

web/app/components/plugins/card/card-more-info.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import DownloadCount from './base/download-count'
 
 type Props = {
@@ -5,7 +6,7 @@ type Props = {
   tags: string[]
 }
 
-const CardMoreInfo = ({
+const CardMoreInfoComponent = ({
   downloadCount,
   tags,
 }: Props) => {
@@ -33,4 +34,7 @@ const CardMoreInfo = ({
   )
 }
 
+// Memoize to prevent unnecessary re-renders when tags array hasn't changed
+const CardMoreInfo = React.memo(CardMoreInfoComponent)
+
 export default CardMoreInfo