Mission 1: React State คืออะไร

เป้าหมายของ Mission นี้: เข้าใจ React State ผ่าน useState

ทำไมต้องมี State

ตัวแปรธรรมดาใน JavaScript พอเปลี่ยนค่าแล้ว หน้าจอไม่รู้เรื่องด้วย — React ต้องใช้สิ่งที่เรียกว่า state ผ่าน useState ถึงจะ "จำ" ค่าไว้ แล้ววาดหน้าจอใหม่ให้อัตโนมัติทุกครั้งที่ค่าเปลี่ยน

flowchart LR
    A["คลิกปุ่ม"] --> B["setCount(count + 1)"]
    B --> C["React อัปเดต state"]
    C --> D["วาดหน้าจอใหม่อัตโนมัติ"]

useState

"use client";
import { useState } from "react";

function Example() {
  const [count, setCount] = useState(0);
  //     ^ค่าปัจจุบัน  ^ฟังก์ชันเปลี่ยนค่า      ^ค่าเริ่มต้น

  return (
    <div>
      <p>ตัวเลข: {count}</p>
      <button onClick={() => setCount(count + 1)}>บวก 1</button>
    </div>
  );
}

หมายเหตุ: Component ที่ใช้ useState/event ต้องมี "use client"; บรรทัดแรกสุดของไฟล์ เสมอ เพราะ Next.js App Router default ให้ทุก component รันฝั่ง Server ก่อน ซึ่งไม่มี state/ event ให้ใช้ — ต้องบอกว่า "ไฟล์นี้รันฝั่ง Client นะ" ด้วย "use client"

คำศัพท์สำคัญ