x

apps/website/src/components/ProductCard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useMemo } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import { ShoppingBag, Layers } from 'lucide-react'
@@ -22,7 +22,7 @@ interface ProductCardProps {
 export default function ProductCard({ product, cardStyle = 'standard', badgeText }: ProductCardProps) {
   const lang = useLang()
   const { addToCart } = useCartStore()
-  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null)
+  const selectedVariant = product.variants?.[0] || null
 
   // Extract unique color swatches from variants
   const colorSwatches = useMemo(() => {

apps/website/src/components/ProductSwatchCard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useMemo } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import type { Product, Variant } from '@homaroma/types'
@@ -35,10 +35,10 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
     return swatches
   }, [product.variants])
 
-  // Active selected variant (for image and price swap when clicking swatch)
-  const [activeVariant, setActiveVariant] = useState<Variant | null>(() => {
+  // Active selected variant
+  const activeVariant = useMemo<Variant | null>(() => {
     return colorSwatches[0]?.variant || product.variants?.[0] || null
-  })
+  }, [colorSwatches, product.variants])
 
   // Display Image: variant image if available, else first product image
   const displayImageUrl = useMemo(() => {