useState

useState คือ React Hook ที่ใช้สำหรับสร้างและจัดการ state ภายใน Function Component

เมื่อไหร่ควรใช้ useState?

• เมื่อข้อมูล (state) มีผลต่อการแสดงผลของ component นั้นๆ
• ข้อมูลนี้เปลี่ยนแปลงได้จากการกระทำของผู้ใช้ เช่น กดปุ่ม, พิมพ์ข้อความ ฯลฯ
• State นี้ไม่จำเป็นต้องแชร์กับ component อื่น

ตัวอย่างการใช้งาน

1. Counter (นับจำนวน)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>เพิ่ม</button>
    </div>
  );
}

2. รับค่าจาก input

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={e => setName(e.target.value)}
      placeholder="กรอกชื่อ"
    />
  );
}

ข้อดี

• ใช้งานง่าย เหมาะกับ state ที่เกี่ยวข้องกับ component เดียว
• ไม่ต้องติดตั้ง package เพิ่มเติม

ข้อจำกัด

• ถ้าต้องแชร์ state ระหว่างหลาย component จะซับซ้อน ต้องส่ง props หลายชั้น (prop drilling)

สรุป

ใช้ useState เมื่อ state นี้เกี่ยวข้องกับ component เดียว ไม่จำเป็นต้องแชร์ข้าม component อื่น ๆ