useFormStatus

(React 19) Hook สำหรับตรวจสอบสถานะของ <form> ที่อยู่ภายในคอมโพเนนต์ เช่น ดูว่า form อยู่ในสถานะ pending หรือไม่ ใช้ใน Server Components หรือเมื่อทำงานกับ form actions

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function MyForm() {
  const handleSubmit = async (formData) => {
    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(formData.get('name'));
  };

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <SubmitButton />
    </form>
  );
}