From b7f337fb791e75cf49dd57e1da84fb10f6779e0f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 6 Oct 2026 19:55:05 +0700
Subject: [PATCH] x

---
 apps/spa/src/components/DynamicProductCarousel.tsx | 1 -
 apps/spa/src/components/ProductCard.tsx            | 4 ++--
 apps/spa/src/components/ProductSwatchCard.tsx      | 6 +++---
 apps/website/src/components/ProductCard.tsx        | 4 ++--
 apps/website/src/components/ProductSwatchCard.tsx  | 8 ++++----
 5 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/spa/src/components/DynamicProductCarousel.tsx b/apps/spa/src/components/DynamicProductCarousel.tsx
index cf38837..51bd59f 100644
--- a/apps/spa/src/components/DynamicProductCarousel.tsx
+++ b/apps/spa/src/components/DynamicProductCarousel.tsx
@@ -1,5 +1,4 @@
 import ProductCard from './ProductCard';
-import ProductSwatchCard from './ProductSwatchCard';
 import { useRef } from 'react';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
diff --git a/apps/spa/src/components/ProductCard.tsx b/apps/spa/src/components/ProductCard.tsx
index a8212a8..5eb8e6b 100644
--- a/apps/spa/src/components/ProductCard.tsx
+++ b/apps/spa/src/components/ProductCard.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { Product, Variant, TranslatableString } from '../types';
 import { getCategoryImage, formatPrice } from '../types';
 import { Heart, ShoppingBag, Layers } from 'lucide-react';
@@ -53,7 +53,7 @@ export default function ProductCard({
   const { addToCart } = useCartStore();
   const { i18n, t } = useTranslation();
   const isWished = isInWishlist(product.id);
-  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null);
+  const selectedVariant = product.variants?.[0] || null;
 
   // Extract unique color swatches from variants
   const colorSwatches = useMemo(() => {
diff --git a/apps/spa/src/components/ProductSwatchCard.tsx b/apps/spa/src/components/ProductSwatchCard.tsx
index 1cf3242..712f040 100644
--- a/apps/spa/src/components/ProductSwatchCard.tsx
+++ b/apps/spa/src/components/ProductSwatchCard.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import type { Product, Variant, TranslatableString } from '../types';
 import { formatPrice } from '../types';
@@ -36,9 +36,9 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
   }, [product.variants]);
 
   // Active selected variant
-  const [activeVariant, setActiveVariant] = useState<Variant | null>(() => {
+  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(() => {
diff --git a/apps/website/src/components/ProductCard.tsx b/apps/website/src/components/ProductCard.tsx
index 3cfb692..841e384 100644
--- a/apps/website/src/components/ProductCard.tsx
+++ b/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(() => {
diff --git a/apps/website/src/components/ProductSwatchCard.tsx b/apps/website/src/components/ProductSwatchCard.tsx
index 5e12b83..e594cd7 100644
--- a/apps/website/src/components/ProductSwatchCard.tsx
+++ b/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(() => {