x

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(() => {