ความแตกต่างระหว่าง state ท้องถิ่นและ state ทั่วโลกคืออะไร?

Question

Accepted Answer

**State ท้องถิ่น** เป็นของคอมโพเนนต์เดียว (หรือซับทรีขนาดเล็ก) และไม่จำเป็นที่อื่น **State ทั่วโลก** ถูกแชร์ระหว่างคอมโพเนนต์หลายตัว มักอยู่ไกลกัน ตลอดแอปพลิเคชัน

## State ท้องถิ่น — จำกัดเฉพาะคอมโพเนนต์หนึ่ง

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

State ท้องถิ่นอยู่ภายในคอมโพเนนต์ (`useState`, `ref`, `data()`) ตัวอย่าง: ค่าอินพุต ว่าเมนูแบบเลื่อนลงเปิดอยู่หรือไม่ สถานะ hover ร่างแบบฟอร์ม ไม่มีคอมโพเนนต์อื่นใจใจกับมัน

## State ทั่วโลก — แชร์ในแอปพลิเคชันทั้งหมด

```jsx
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
```

State ทั่วโลกคือข้อมูลที่คอมโพเนนต์ที่ไม่เกี่ยวข้องจำนวนมากต้องอ่านหรืออัปเดตอย่างสอดคล้อง: ผู้ใช้ที่ยืนยัน ธีม รถเข็นช้อปปิง การแจ้งเตือนแอปพลิเคชัน มันอาศัยอยู่ใน Context, ร้านค้า (Redux/Zustand/Pinia) หรือสิ่งที่คล้ายกัน

## วิธีการตัดสินใจ

```text
Ask: "How many components need this, and how far apart are they?"

One component (or parent+child)         → LOCAL state
Many unrelated components / whole app    → GLOBAL state
```

## ข้อผิดพลาดทั่วไป: ขยายขนาด state ทั่วโลกมากเกินไป

```jsx
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);

// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
```

การทำให้ทุกอย่างเป็นทั่วโลก เพิ่มบอยเลอร์เพลต เชื่อมต่อคอมโพเนนต์ และอาจส่งผลต่อประสิทธิภาพ (re-renders มากขึ้น) แนวทางปฏิบัติที่ดีที่สุดคือ **เก็บ state ให้เป็นท้องถิ่นมากที่สุดเท่าที่เป็นไปได้** และเพิ่มเป็นทั่วโลกก็ต่อเมื่อการแชร์ต้องการอย่างแท้จริง

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

การเลือกระหว่าง state ท้องถิ่นและทั่วโลกเป็นหนึ่งในการตัดสินใจ state ที่มีผลกระทบมากที่สุด

การเก็บ state ท้องถิ่นทำให้คอมโพเนนต์ง่าย ปลดปล่อย และมีประสิทธิภาพ การเข้าถึง state ทั่วโลกเฉพาะเมื่อข้อมูลถูกแชร์จริง ๆ หลีกเลี่ยงความซับซ้อนที่ไม่จำเป็น

ปฏิปักษ์ที่มักพบ — การวางทุกอย่างในร้านค้าทั่วโลก "เพียงเพื่อเป็นอย่างไร" — นำไปสู่แอปพลิเคชันที่บวมและเชื่อมต่ออย่างแน่นหนา

กฎการแนะนำ: **ท้องถิ่นตามค่าเริ่มต้น ทั่วโลกเมื่อการแชร์ต้องการอย่างแท้จริง**