Selector และการป้องกันการเรนเดอร์ซ้ำโดยไม่จำเป็น

ยินดีต้อนรับ

ปัญหาของตัวเลือกเริ่มต้น

// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;

การใช้ตัวเลือก

// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;

การตรวจสอบความเท่ากันของการอ้างอิง

// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));

การแก้ไขด้วยความเท่ากันแบบตื้น

import { shallow } from 'zustand/shallow';

const info = useAppStore(
  s => ({ id: s.id, name: s.name }),
  shallow // compare by content, not reference
);

การเลือกค่าหลายค่า

const { items, loading } = useCartStore(
  s => ({ items: s.items, loading: s.loading }),
  shallow
);

การอ้างอิงแอ็กชันที่คงที่

// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);

ตัวช่วย useShallow (Zustand v5+)

import { useShallow } from 'zustand/react/shallow';

const { items, loading } = useCartStore(
  useShallow(s => ({ items: s.items, loading: s.loading }))
);

การรวมตัวเลือก

const totalPrice = useCartStore(
  s => s.items.reduce((sum, item) => sum + item.price, 0)
);

การวิเคราะห์การเรนเดอร์ใหม่ของ Zustand

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทเรียนถัดไป