React 效能優化三件套：
useMemo、useCallback、React.memo

function ProductList({ products, onAddToCart }) {
  return (
    <div>
      {products.map(p => (
        <ProductCard key={p.id} product={p} onAdd={onAddToCart} />
      ))}
    </div>
  );
}

// ❌ 沒有 memo：每次父元件渲染，ProductCard 都重新渲染
function ProductCard({ product, onAdd }) {
  console.log('ProductCard 渲染了', product.id);
  return <div onClick={() => onAdd(product)}>{product.name}</div>;
}

// ✅ 有 memo：props 沒變就跳過渲染
const ProductCard = React.memo(function ProductCard({ product, onAdd }) {
  console.log('ProductCard 渲染了', product.id);
  return <div onClick={() => onAdd(product)}>{product.name}</div>;
});

const ProductCard = React.memo(
  function ProductCard({ product, onAdd }) {
    return <div onClick={() => onAdd(product)}>{product.name}</div>;
  },
  // 第二個參數：arePropsEqual(prevProps, nextProps)
  // 回傳 true → 跳過渲染（props 視為相同）
  // 回傳 false → 重新渲染
  (prevProps, nextProps) => {
    // 只在意 product.id 和 product.price，其他欄位忽略
    return (
      prevProps.product.id === nextProps.product.id &&
      prevProps.product.price === nextProps.product.price
    );
    // 注意：onAdd 的比較這裡被忽略了，
    // 搭配 useCallback 使用更安全
  }
);

// ❌ 沒有 useMemo：每次渲染都重新排序 / 篩選
// 假設 products 有 10,000 筆資料——每次父元件 setState，這裡就算一次
function ProductList({ products, filterCategory }) {
  const filteredProducts = products
    .filter(p => p.category === filterCategory)
    .sort((a, b) => a.price - b.price);

  return <>{filteredProducts.map(p => <ProductCard key={p.id} product={p} />)}</>;
}

// ✅ 有 useMemo：只在 products 或 filterCategory 改變時重新計算
function ProductList({ products, filterCategory }) {
  const filteredProducts = useMemo(() => {
    return products
      .filter(p => p.category === filterCategory)
      .sort((a, b) => a.price - b.price);
  }, [products, filterCategory]); // deps array：這兩個值沒變就不重算

  return <>{filteredProducts.map(p => <ProductCard key={p.id} product={p} />)}</>;
}

function ShoppingCart() {
  const [cart, setCart] = useState([]);

  // ❌ 每次 ShoppingCart 渲染，addToCart 都是新的函式 reference
  // → React.memo 包的 ProductCard 每次都重新渲染，memo 形同虛設
  const addToCart = (product) => {
    setCart(prev => [...prev, product]);
  };

  // ✅ useCallback：addToCart 的 reference 在 deps 不變時保持穩定
  const addToCart = useCallback((product) => {
    setCart(prev => [...prev, product]);
    // 注意：這裡用了 setCart 的 updater 形式 (prev => ...)
    // 所以不需要把 cart 放進 deps，避免函式頻繁重建
  }, []); // 空 deps：函式本身不依賴任何外部 state / props

  return <ProductList products={products} onAddToCart={addToCart} />;
}

// types.ts
interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

// ShoppingApp.tsx
function ShoppingApp() {
  const [cart, setCart] = useState<Product[]>([]);
  const [filterCategory, setFilterCategory] = useState('all');
  const [products] = useState<Product[]>(initialProducts); // 商品資料不會變

  // ── 1. useCallback：穩定 addToCart 的 reference ──────────────
  // deps 為空：不依賴任何外部變數（用 updater 形式讀 cart）
  const addToCart = useCallback((product: Product) => {
    setCart(prev => [...prev, product]);
  }, []);

  // ── 2. useMemo：昂貴的篩選 + 排序運算 ───────────────────────
  // 只在 products 或 filterCategory 改變時重新計算
  const filteredProducts = useMemo(() => {
    return filterCategory === 'all'
      ? products
      : products.filter(p => p.category === filterCategory);
  }, [products, filterCategory]);

  // ── 3. useMemo：衍生值（購物車總金額）───────────────────────
  const totalPrice = useMemo(() => {
    return cart.reduce((sum, p) => sum + p.price, 0);
  }, [cart]);

  return (
    <div>
      <CartSummary total={totalPrice} />
      <CategoryFilter
        value={filterCategory}
        onChange={setFilterCategory}
      />
      {/* ProductList 是 React.memo 包裹的元件 */}
      {/* filteredProducts（useMemo）和 addToCart（useCallback）*/}
      {/* 的 reference 都是穩定的，所以 memo 可以發揮效用 */}
      <ProductList
        products={filteredProducts}
        onAddToCart={addToCart}
      />
    </div>
  );
}

// ── React.memo 包裹的子元件 ──────────────────────────────────
const ProductList = React.memo(function ProductList({
  products,
  onAddToCart,
}: {
  products: Product[];
  onAddToCart: (product: Product) => void;
}) {
  console.log('ProductList 渲染了'); // 只在 products 或 onAddToCart 變時出現
  return (
    <>
      {products.map(p => (
        <ProductCard key={p.id} product={p} onAdd={onAddToCart} />
      ))}
    </>
  );
});

// ProductCard 也用 memo 包裹，防止兄弟元件更新時觸發
const ProductCard = React.memo(function ProductCard({
  product,
  onAdd,
}: {
  product: Product;
  onAdd: (product: Product) => void;
}) {
  return (
    <div className="border rounded-lg p-4">
      <h3>{product.name}</h3>
      <p>NT$ {product.price.toLocaleString()}</p>
      <button onClick={() => onAdd(product)}>加入購物車</button>
    </div>
  );
});

// 用 React 的 Profiler 元件在程式碼層面量測
import { Profiler, ProfilerOnRenderCallback } from 'react';

const onRenderCallback: ProfilerOnRenderCallback = (
  id,           // 元件樹的識別 ID（你自訂的字串）
  phase,        // 'mount' 或 'update'
  actualDuration, // 這次渲染花了幾毫秒
  baseDuration,   // 如果沒有 memo，估計需要幾毫秒
  startTime,
  commitTime,
) => {
  // 可以上報到 DataDog、Sentry 等效能監控服務
  console.log(`[${id}] ${phase} 渲染耗時：${actualDuration.toFixed(2)}ms`);

  if (actualDuration > 16) {
    console.warn(`⚠️ ${id} 渲染超過一個 frame（${actualDuration.toFixed(2)}ms）`);
  }
};

function App() {
  return (
    <Profiler id="ProductList" onRender={onRenderCallback}>
      <ProductList products={products} onAddToCart={addToCart} />
    </Profiler>
  );
}
// 注意：Profiler 只在開發模式有效，production build 中會自動移除