Scope ของ State: Local State vs Global State

Scope ของ State: Local State vs Global State

จากบทที่แล้ว เราได้รู้จักกับ State Management และความสำคัญของมันไปแล้ว ในบทนี้ เราจะมาเจาะลึกกันว่า State ที่เราจัดการนั้น มีขอบเขต (Scope) แบบไหนได้บ้าง ซึ่งหลักๆ แล้วเราจะพูดถึง 2 ขอบเขตหลักๆ คือ Local State และ Global State

Local State คืออะไร?

Local State หรือ State เฉพาะที่ คือ State ที่ถูกใช้งานและจัดการภายใน Component (ส่วนประกอบ) ใด Component หนึ่งเท่านั้น Component อื่นๆ ไม่สามารถเข้าถึงหรือเปลี่ยนแปลง State นี้ได้โดยตรง ลองนึกภาพว่า Local State เหมือนของส่วนตัวที่เราเก็บไว้ในห้องของเรา คนอื่นจะหยิบไปใช้ไม่ได้ นอกจากเราจะอนุญาต

ตัวอย่าง: ลองจินตนาการถึง Component ที่แสดง Counter (ตัวนับเลข) การนับเลขขึ้นลงของ Counter นี้ จะถูกเก็บไว้ใน Local State ของ Component นั้นๆ เท่านั้น Counter อื่นๆ ในหน้าเดียวกัน จะไม่ได้รับผลกระทบจากการเปลี่ยนแปลงนี้

ข้อดีของ Local State:

• ง่ายต่อการจัดการ: เนื่องจาก State อยู่ใน Component เดียว การเปลี่ยนแปลงและการติดตามจึงทำได้ง่าย
• ลดความซับซ้อน: ช่วยลดความซับซ้อนของแอปพลิเคชัน เพราะ Component แต่ละตัวจัดการ State ของตัวเอง
• ประสิทธิภาพ: การเปลี่ยนแปลง State จะกระทบเฉพาะ Component นั้นๆ ทำให้การ Re-render (การวาดหน้าจอใหม่) เกิดขึ้นเฉพาะส่วนที่จำเป็นเท่านั้น

ข้อเสียของ Local State:

• ไม่เหมาะกับข้อมูลที่ต้องใช้ร่วมกัน: หากข้อมูลจำเป็นต้องถูกใช้ในหลาย Component การใช้ Local State จะทำให้เกิดความซ้ำซ้อนและยากต่อการจัดการ
• Prop Drilling: หาก Component ลูกจำเป็นต้องใช้ State ที่อยู่ใน Component แม่ เราจะต้องส่ง (Pass) State ผ่าน Props (คุณสมบัติ) ซึ่งอาจทำให้โค้ดซับซ้อนถ้ามี Component ที่ซ้อนกันหลายชั้น (Prop Drilling)

ตัวอย่างโค้ด (React):

import React, { useState } from 'react';

function Counter() {
  // useState คือ Hook (ฟังก์ชันพิเศษ) ที่ใช้จัดการ Local State ใน React
  const [count, setCount] = useState(0); // count คือ State, setCount คือฟังก์ชันสำหรับเปลี่ยน State

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

ในตัวอย่างนี้ count คือ Local State ที่ถูกจัดการโดย useState ภายใน Component Counter เท่านั้น

Global State คืออะไร?

Global State หรือ State ส่วนกลาง คือ State ที่สามารถเข้าถึงและเปลี่ยนแปลงได้จากทุก Component ในแอปพลิเคชัน ลองนึกภาพว่า Global State เหมือนกระดานข่าวที่ทุกคนในบ้านสามารถอ่านและเขียนได้

ตัวอย่าง: ข้อมูลผู้ใช้ที่ Login เข้าสู่ระบบ (เช่น ชื่อ, รูปโปรไฟล์) อาจถูกเก็บไว้ใน Global State เพื่อให้ Component ต่างๆ สามารถเข้าถึงข้อมูลนี้ได้โดยไม่ต้องส่งผ่าน Props ไปมา

ข้อดีของ Global State:

• เข้าถึงได้จากทุกที่: Component ทุกตัวสามารถเข้าถึงและเปลี่ยนแปลง State ได้
• ลด Prop Drilling: ไม่จำเป็นต้องส่ง Props ผ่าน Component ที่ซ้อนกันหลายชั้น
• จัดการข้อมูลที่ใช้ร่วมกันได้ง่าย: เหมาะสำหรับข้อมูลที่ต้องใช้ร่วมกันในหลาย Component

ข้อเสียของ Global State:

• ซับซ้อนในการจัดการ: การเปลี่ยนแปลง State อาจส่งผลกระทบต่อหลาย Component ทำให้ยากต่อการติดตามและ Debug (แก้ไขข้อผิดพลาด)
• Over-rendering: การเปลี่ยนแปลง State อาจทำให้ Component ที่ไม่เกี่ยวข้องต้อง Re-render ซึ่งส่งผลเสียต่อประสิทธิภาพ
• ความเสี่ยงในการเปลี่ยนแปลง State โดยไม่ตั้งใจ: เนื่องจากทุก Component สามารถเปลี่ยนแปลง State ได้ จึงมีความเสี่ยงที่ State จะถูกแก้ไขโดยไม่ตั้งใจ

ตัวอย่าง (แนวคิด):

ใน React เราสามารถใช้ Context API หรือ Library (ไลบรารี) อย่าง Redux เพื่อจัดการ Global State (เราจะพูดถึง Context API และ Redux ในบทต่อๆ ไป)

สมมติว่าเรามี Global State ที่เก็บข้อมูลผู้ใช้:

const userState = {
  name: "สมชาย ใจดี",
  profilePicture: "somchai.jpg"
};

Component ใดๆ ในแอปพลิเคชัน สามารถเข้าถึงข้อมูล userState นี้ได้ โดยไม่ต้องส่งผ่าน Props จาก Component แม่

ตัวอย่างการใช้งาน Local และ Global State

เพื่อให้เห็นภาพชัดเจน ลองพิจารณาแอปพลิเคชัน E-commerce (ร้านค้าออนไลน์) อย่างง่าย:

• Local State:
  • จำนวนสินค้าที่ผู้ใช้เลือกในหน้า Product Detail (รายละเอียดสินค้า)
  • สถานะการเปิด/ปิด Modal (หน้าต่างป๊อปอัพ)
  • สถานะการโหลดข้อมูล (Loading state) ของ Component หนึ่งๆ
• Global State:
  • ข้อมูลผู้ใช้ที่ Login เข้าสู่ระบบ
  • ข้อมูลตะกร้าสินค้า (Cart)
  • สถานะการ Authentication (การยืนยันตัวตน)
  • Theme (ธีม) ของแอปพลิเคชัน (เช่น Dark mode/Light mode)

จะเห็นได้ว่าข้อมูลบางอย่าง (เช่น จำนวนสินค้าที่เลือก) มีความเฉพาะเจาะจงกับ Component นั้นๆ จึงเหมาะกับการใช้ Local State ในขณะที่ข้อมูลบางอย่าง (เช่น ข้อมูลผู้ใช้) จำเป็นต้องใช้ร่วมกันในหลาย Component จึงเหมาะกับการใช้ Global State

สรุป

การเลือกใช้ Local State หรือ Global State ขึ้นอยู่กับความต้องการของแอปพลิเคชันและลักษณะของข้อมูลที่จะจัดการ หากข้อมูลมีความเฉพาะเจาะจงและใช้ภายใน Component เดียว การใช้ Local State จะเป็นทางเลือกที่ดี แต่หากข้อมูลจำเป็นต้องใช้ร่วมกันในหลาย Component การใช้ Global State จะช่วยให้การจัดการข้อมูลเป็นไปอย่างมีประสิทธิภาพมากขึ้น

ในบทต่อไป เราจะมาเรียนรู้เครื่องมือ State Management พื้นฐานใน React นั่นคือ useState ซึ่งเป็น Hook ที่ใช้จัดการ Local State ได้อย่างง่ายดาย