`useFormStatus` dùng để làm gì? Vì sao nút submit phải nằm trong component con của `<form>` mới đọc được trạng thái?

useFormStatus cho một component đọc trạng thái gửi của form cha gần nhất mà không cần truyền prop isSubmitting xuống.

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>
}

function ContactForm() {
  return (
    <form action={sendMessage}>
      <input name="email" />
      <SubmitButton />
    </form>
  )
}

Nó đọc trạng thái qua Context do chính thẻ <form> cung cấp, mà Context chỉ chảy xuống dưới. Nếu gọi useFormStatus ngay trong ContactForm — tức cùng cấp với thẻ <form> chứ không nằm trong nó — hook trả về pending: false mãi mãi. Vì vậy nút submit phải tách thành component con.

Ngoài pending, hook còn trả data (FormData đang gửi), method, action — đủ để hiện tên file đang upload hoặc email đang được gửi. useFormStatus chỉ theo dõi form được submit bằng action, không theo dõi onSubmit tự viết.