สถานะที่ได้มาคืออะไร และเหตุใดจึงต้องหลีกเลี่ยงการทำให้ซ้ำกัน

Question

Accepted Answer

**สถานะที่ได้มา** คือค่าใดๆ ที่คุณ **สามารถคำนวณได้จากสถานะที่มีอยู่** แทนที่จะเก็บไว้แยกกัน หลักการ: ถ้าคุณสามารถคำนวณได้ อย่าเก็บไว้ — ให้ได้มาในการเรนเดอร์แต่ละครั้ง การเก็บค่าที่สามารถได้มาจะเชิญชวนให้พวกเขาตกลงไม่ตรงกัน

## รูปแบบต่อต้าน: การเก็บสิ่งที่คุณสามารถคำนวณได้

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

ตอนนี้ `total` เป็นสำเนาครั้งที่สองของข้อมูลที่มีอยู่แล้วใน `items` การเปลี่ยนแปลงทุกครั้ง `items` ต้องอัปเดต `total` *ด้วย* และในขณะที่คุณพลาดสิ่งหนึ่ง (ลบ การเปลี่ยนแปลงปริมาณ) พวกเขาไม่เห็นด้วยและ UI แสดงผลรวมที่ไม่ถูกต้อง

## ข้อแก้ไข: ได้มาจากการเรนเดอร์

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

เมื่อ `total` ได้มา ไม่มีอะไรพิเศษที่ต้องซิงค์ — เปลี่ยน `items` และรวมทั้งหมดจะถูกต้องเสมอ

## Memoize เฉพาะเมื่อการคำนวณมีราคาแพง

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

สำหรับการอนุมานที่หนัก (ตัวกรอง/การจัดเรียงขนาดใหญ่) `useMemo`/`computed`/selectors แคชผลลัพธ์เพื่อให้คำนวณใหม่เฉพาะเมื่อการพึ่งพาเปลี่ยนแปลง — แต่ยังคง *ได้มา* ไม่ใช่เก็บไว้เป็นสถานะที่เป็นอิสระ

## ค่าที่ได้มาทั่วไป

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## เหตุใดจึงมีความสำคัญ

การไม่ทำให้สถานะที่ได้มาซ้ำกันคือการประยุกต์ใช้แหล่งความจริงเดียวโดยตรง — ช่วยขจัดคลาสข้อบกพร่องทั้งหมดที่สำเนาหลุดออกไป

กฎ "ได้มา อย่าเก็บไว้" ช่วยให้สถานะของคุณมีขนาดเล็กและ UI ของคุณสอดคล้องตามการออกแบบ

การรู้จักสิ่งที่สามารถได้มา (และการเข้าถึง `useMemo`/computed/selectors เฉพาะเพื่อประสิทธิภาพ ไม่เคยสร้างแหล่งความจริงที่สอง) เป็นลักษณะเฉพาะของการออกแบบสถานะที่สะอาดและป้องกันข้อบกพร่อง