State ท้องถิ่น เป็นของคอมโพเนนต์เดียว (หรือซับทรีขนาดเล็ก) และไม่จำเป็นที่อื่น State ทั่วโลก ถูกแชร์ระหว่างคอมโพเนนต์หลายตัว มักอยู่ไกลกัน ตลอดแอปพลิเคชัน
State ท้องถิ่น — จำกัดเฉพาะคอมโพเนนต์หนึ่ง
() {
[query, setQuery] = ();
;
}
State ท้องถิ่น เป็นของคอมโพเนนต์เดียว (หรือซับทรีขนาดเล็ก) และไม่จำเป็นที่อื่น State ทั่วโลก ถูกแชร์ระหว่างคอมโพเนนต์หลายตัว มักอยู่ไกลกัน ตลอดแอปพลิเคชัน
() {
[query, setQuery] = ();
;
}
State ท้องถิ่นอยู่ภายในคอมโพเนนต์ (useState, ref, data()) ตัวอย่าง: ค่าอินพุต ว่าเมนูแบบเลื่อนลงเปิดอยู่หรือไม่ สถานะ hover ร่างแบบฟอร์ม ไม่มีคอมโพเนนต์อื่นใจใจกับมัน
// 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) หรือสิ่งที่คล้ายกัน
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
// ❌ 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 ทั่วโลกเฉพาะเมื่อข้อมูลถูกแชร์จริง ๆ หลีกเลี่ยงความซับซ้อนที่ไม่จำเป็น
ปฏิปักษ์ที่มักพบ — การวางทุกอย่างในร้านค้าทั่วโลก "เพียงเพื่อเป็นอย่างไร" — นำไปสู่แอปพลิเคชันที่บวมและเชื่อมต่ออย่างแน่นหนา
กฎการแนะนำ: ท้องถิ่นตามค่าเริ่มต้น ทั่วโลกเมื่อการแชร์ต้องการอย่างแท้จริง
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค