State Management คืออะไร? ทำไมต้องใช้?

State Management คืออะไร? ทำไมต้องใช้?

สวัสดีครับ! สำหรับเพื่อนๆ ที่กำลังเริ่มต้นเส้นทาง Frontend Development (การพัฒนาส่วนหน้าของเว็บไซต์หรือแอปพลิเคชัน) บทความนี้จะเป็นจุดเริ่มต้นที่ดีในการทำความเข้าใจเรื่อง State Management (การจัดการสถานะ) ซึ่งเป็นหัวใจสำคัญในการสร้างแอปพลิเคชันที่ซับซ้อนและทำงานได้อย่างราบรื่น

State คืออะไร?

ก่อนจะไปถึง State Management เรามาทำความเข้าใจกันก่อนว่า State (สถานะ) คืออะไร? ในบริบทของ Frontend Development, State คือ ข้อมูลที่เปลี่ยนแปลงได้ ที่แอปพลิเคชันของเราใช้ในการแสดงผล UI (User Interface - ส่วนติดต่อผู้ใช้) และตอบสนองต่อการกระทำของผู้ใช้

ลองนึกภาพง่ายๆ ว่า State คือ "ความทรงจำ" ของแอปพลิเคชันของเรา ยกตัวอย่างเช่น:

• สถานะการ Login: แอปพลิเคชันรู้หรือไม่ว่าผู้ใช้ Login อยู่หรือยัง?
• ข้อมูลผู้ใช้: ชื่อ, อีเมล, รูปโปรไฟล์ของผู้ใช้
• รายการสินค้าในตะกร้า: ข้อมูลของสินค้าแต่ละชิ้นที่ผู้ใช้เลือก
• สถานะการแสดงผล: หน้าจอแสดงผลอะไรอยู่, ข้อมูลอะไรที่กำลังโหลด

ข้อมูลเหล่านี้เปลี่ยนแปลงได้ตลอดเวลา ขึ้นอยู่กับการกระทำของผู้ใช้ และการเปลี่ยนแปลงเหล่านี้มีผลต่อ UI ที่เราเห็น

ปัญหาของการจัดการ State แบบดั้งเดิม

ถ้า State คือข้อมูลที่เปลี่ยนแปลงได้ แล้วทำไมเราต้องมี State Management? ทำไมเราไม่จัดการ State แบบเดิมๆ ล่ะ?

ในแอปพลิเคชันขนาดเล็ก การจัดการ State แบบดั้งเดิมอาจจะเพียงพอ แต่เมื่อแอปพลิเคชันของเราเริ่มซับซ้อนขึ้น ปัญหาต่างๆ ก็จะเริ่มตามมา:

• Prop Drilling (การส่ง Props เป็นทอดๆ): ใน React (และ Framework อื่นๆ) เรามักจะส่งข้อมูลจาก Component (ส่วนประกอบ) หนึ่งไปยังอีก Component หนึ่งผ่านสิ่งที่เรียกว่า "Props" (คุณสมบัติ) ถ้า Component ที่ต้องการข้อมูลอยู่ลึกหลายชั้น เราจะต้องส่ง Props ผ่าน Component ที่ไม่ต้องการข้อมูลนั้นด้วย ซึ่งทำให้โค้ดอ่านยากและดูแลรักษายาก
• State ที่กระจัดกระจาย: State อาจจะถูกเก็บไว้ในหลาย Component ทำให้ยากที่จะติดตามว่า State ไหนอยู่ที่ไหน และ State ไหนเปลี่ยนแปลงเมื่อไหร่
• การเปลี่ยนแปลง State ที่คาดเดาไม่ได้: เมื่อ State ถูกแก้ไขจากหลายที่ อาจจะทำให้เกิดปัญหาที่เราคาดเดาไม่ได้ว่า State จะมีค่าเป็นอะไรในแต่ละช่วงเวลา
• การแชร์ State ระหว่าง Component ที่ไม่เกี่ยวข้องกัน: ถ้า Component สองตัวที่ไม่ได้เป็น Parent-Child กัน ต้องการแชร์ State เราจะต้องยก State นั้นขึ้นไปไว้ใน Component บรรพบุรุษที่ทั้งสอง Component นั้นอยู่ภายใต้ ทำให้ Component บรรพบุรุษนั้นมีหน้าที่มากเกินไป

ลองดูตัวอย่างง่ายๆ ใน React:

function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <Header isLoggedIn={isLoggedIn} />
      <Content isLoggedIn={isLoggedIn} />
      <Footer isLoggedIn={isLoggedIn} />
    </div>
  );
}

function Header(props) {
  return (
    <header>
      {props.isLoggedIn ? <p>Welcome!</p> : <p>Please Login</p>}
    </header>
  );
}

function Content(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Content for logged-in users</p> : <p>Content for guests</p>}
    </div>
  );
}

function Footer(props) {
  return (
    <footer>
      {props.isLoggedIn ? <p>Footer for logged-in users</p> : <p>Footer for guests</p>}
    </footer>
  );
}

ในตัวอย่างนี้ เรามี State isLoggedIn ที่เก็บไว้ใน Component App และเราต้องส่ง Props isLoggedIn ไปยัง Component Header, Content และ Footer ถึงแม้ว่า Component เหล่านั้นจะไม่ได้ใช้ State นั้นโดยตรง แต่จำเป็นต้องส่งต่อเพื่อให้ Component ลูกหลานสามารถเข้าถึงได้ นี่คือตัวอย่างของ Prop Drilling

ข้อดีของการใช้ State Management

State Management เข้ามาช่วยแก้ปัญหาเหล่านี้ โดย:

• Centralized State (ศูนย์รวม State): State ทั้งหมดจะถูกเก็บไว้ในที่เดียว ทำให้ง่ายต่อการติดตามและจัดการ
• Predictable State Changes (การเปลี่ยนแปลง State ที่คาดเดาได้): State จะถูกแก้ไขผ่านกลไกที่กำหนดไว้ ทำให้เราสามารถคาดเดาได้ว่า State จะมีค่าเป็นอะไรในแต่ละช่วงเวลา
• Simplified Data Flow (การไหลของข้อมูลที่ง่ายขึ้น): Component สามารถเข้าถึง State ได้โดยตรง โดยไม่ต้องส่ง Props เป็นทอดๆ
• Improved Code Reusability (การนำโค้ดกลับมาใช้ใหม่ได้ง่ายขึ้น): Component ที่ใช้ State สามารถนำไปใช้ในส่วนอื่นๆ ของแอปพลิเคชันได้ง่ายขึ้น
• Easier Debugging (การแก้ไขข้อผิดพลาดที่ง่ายขึ้น): เมื่อ State ถูกจัดการอย่างเป็นระบบ การแก้ไขข้อผิดพลาดก็จะง่ายขึ้น เพราะเราสามารถติดตามการเปลี่ยนแปลงของ State ได้

สรุปแล้ว State Management ช่วยให้เราสร้างแอปพลิเคชัน Frontend ที่ซับซ้อนได้ง่ายขึ้น โดยลดความซับซ้อนของการจัดการ State และทำให้โค้ดของเราอ่านง่ายขึ้น ดูแลรักษาง่ายขึ้น และมีประสิทธิภาพมากขึ้น

ในบทเรียนต่อไป เราจะมาเจาะลึกถึง Scope ของ State ว่ามี Local State และ Global State ต่างกันอย่างไร แล้วเราควรใช้ State Management แบบไหนในแต่ละสถานการณ์ อย่าลืมติดตามกันนะครับ!