React Core Mastery: เข้าใจไส้ในที่คุณต้องรู้เพื่อเป็น Senior

🛑 1. The Problem First: ทำไมเราต้องมี React?

สมัยก่อนเวลาเราจะเปลี่ยนข้อความบนเว็บ เรามักจะทำแบบนี้:

// ❌ Naive Approach: แก้ DOM ตรงๆ
const element = document.getElementById("status");
element.innerText = "Updated!";
element.style.color = "red";

ปัญหา: ถ้าคุณมี 1,000 จุดที่ต้องแก้ และทุกครั้งที่คุณแก้ Browser ต้องคำนวณตำแหน่งใหม่ (Reflow) และระบายสีใหม่ (Repaint) ทั้งหน้า เว็บคุณจะกระตุกจนใช้งานไม่ได้ นี่คือความเจ็บปวดที่เรียกว่า "Expensive DOM Operations"

💡 2. Real-Life Analogy: สั่งแก้บ้านบนกระดาษร่าง

ลองนึกภาพว่าคุณกำลัง "รีโนเวทบ้าน".

• Real DOM: คือการที่คุณเดินไปทุบกำแพงจริงๆ ทาสีจริงๆ (เสียเงินและเวลามาก ถ้าเปลี่ยนใจบ่อยๆ ช่างจะด่าและบ้านจะพัง)
• Virtual DOM: คือการที่คุณหยิบกระดาษแปลนบ้านมา "ร่างภาพ" ก่อน คุณลองลบหน้าต่างตรงนี้ ย้ายประตูตรงนั้นบนกระดาษกี่รอบก็ได้จนพอใจ
• Reconciliation: เมื่อคุณตัดสินใจได้แล้ว คุณเอาแปลนเก่ากับแปลนใหม่มาวางทับกัน แล้วดูว่า "อ้อ... แค่เปลี่ยนสีกรอบหน้าต่างนี่นา" คุณค่อยเดินไปทาสีที่หน้าต่างจริงๆ แค่จุดเดียว

🚀 3. Execution Journey: ข้อมูลเดินทางอย่างไร?

เมื่อคุณเรียก setCount(count + 1) นี่คือสิ่งที่เกิดขึ้นเบื้องหลัง:

🛠 Step-by-step:

1. Trigger: State เปลี่ยน React จะทำสัญลักษณ์ว่า Component นี้ "สกปรก" (Dirty) ต้องวาดใหม่
2. Render phase: React เรียกฟังก์ชัน Component ของคุณเพื่อสร้าง Virtual DOM Tree ชุดใหม่ในหน่วยความจำ
3. Diffing: React เอาเครื่องมือ (Diffing Algorithm) มาเทียบ Tree ใหม่กับ Tree เก่า
4. Commit phase: React สรุปรายการเฉพาะจุดที่ต่างกัน (Patch) แล้วส่งไปแก้ที่ Real DOM เพียงครั้งเดียว

// ✅ Best Practice: เขียนคอมโพเนนท์ให้ Pure เพื่อให้การ Diffing นิ่งที่สุด
function UserProfile({ name }: { name: string }) {
  // ข้อมูลเข้า (name) -> ออกเป็น UI เดิมเสมอ (Pure)
  return <div className="profile">{name}</div>;
}

🪤 4. The Junior Trap: กับดักของ Index Key

จูเนียร์ส่วนใหญ่มักจะทำแบบนี้เพราะมัน "รันผ่าน":

// ❌ Junior Trap: ใช้ index เป็น key
{
  items.map((item, index) => <ListItem key={index} content={item} />);
}

ทำไมถึงพัง? ถ้าคุณสลับลำดับ Item ตัวที่ 1 กับ 2 React จะมองที่ key แล้วเห็นว่า "อ้าว key 0 กับ 1 เหมือนเดิมนี่นา!" มันจะไม่วาดใหม่ หรืออาจจะหยิบ State ของตัวเก่ามาใส่ตัวใหม่จนข้อมูลเพี้ยน ✅ การแก้ไข: ใช้ ID จริงๆ จาก Database เสมอ เพื่อให้ React จำได้แม่นยำ

⚖️ 5. The Why Matrix: ท่าไหนคุ้มกว่า?

🎓 6. Senior Mindset Summary

การเป็น Senior ไม่ใช่แค่เขียน React ให้รันได้ แต่คือการเข้าใจว่า "การแตะต้อง Real DOM คือทรัพยากรที่มีจำกัด" เราจึงต้องใช้ Virtual DOM เป็นตัวกลางเพื่อบริหารจัดการการแก้ไขให้คุ้มค่าที่สุดครับ!