perf: add React.memo to hot-path components

2026-05-24 19:44:50 +05:00
parent d7e355dc78
commit c9342f833b
4 changed files with 12 additions and 4 deletions
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { useCallback, useMemo, useRef } from 'react'
+import React from 'react'
 import { useMediaQuery } from '@mui/material'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
@@ -18,7 +19,7 @@ import type { Swiper as SwiperType } from 'swiper/types'

 type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }

-export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
+const ProductCardInner = ({ product, mediaHeight = 200, actions }: Props) => {
  const navigate = useNavigate()
  const isMobile = useMediaQuery('(max-width:600px)')
  const swiperRef = useRef<SwiperType | null>(null)
@@ -247,3 +248,7 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
    </Card>
  )
 }
+
+export const ProductCard = React.memo(ProductCardInner, (prev, next) => {
+  return prev.product.id === next.product.id && prev.mediaHeight === next.mediaHeight && prev.actions === next.actions
+})