Peeps Avatar

Hello, codestus.

Go back

Tìm hiểu về useFormStatus hook trong React

Published at: 21/01/2025

6 mins read

Hôm nay mình muốn cùng mọi người khám phá một hook khá thú vị trong React, đó là useFormStatus. Nếu bạn đang làm việc với form và cảm thấy việc quản lý trạng thái của nó hơi rắc rối, thì đây có vẻ chính là thứ sẽ giúp cuộc sống của bạn dễ thở hơn đấy!

useFormStatus Là Gì?

Chắc hẳn bạn đã từng gặp tình huống khi làm việc với form: bạn cần biết khi nào form đang được submit, khi nào có lỗi xảy ra, hay làm sao để hiển thị thông báo phù hợp cho người dùng. useFormStatus chính là câu trả lời cho những vấn đề này! Hook này giúp bạn theo dõi trạng thái của form một cách dễ dàng, từ đó tạo ra những form động và phản hồi nhanh chóng hơn.

Tại Sao Lại Cần useFormStatus?

Làm việc với form chưa bao giờ là dễ dàng, bạn phải xử lý rất nhiều thứ: validation, trạng thái submit, hiển thị thông báo lỗi, và còn nhiều hơn thế nữa. useFormStatus ra đời để giúp bạn giải quyết những vấn đề này một cách đơn giản và hiệu quả hơn. Thay vì phải tự quản lý trạng thái form bằng các state phức tạp, giờ đây chỉ cần sử dụng chiếc hook mới này của React, chúng ta có thể tiết kiệm được khối thời gian và công sức.

Nói thì vậy nhưng thực tế chúng ta cũng cần trải nghiệm thêm để có đánh giá rõ ràng hơn. Giờ thì cùng đi vào phần cụ thể hơn nào.

Cách Sử Dụng useFormStatus

Để bắt đầu, bạn cần import useFormStatus từ thư viện React:

import { useFormStatus } from "react-dom"

Sau đó, bạn có thể sử dụng hook này trong component của mình. Ví dụ, đây là cách bạn có thể tạo một nút submit với trạng thái "pending":

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  )
}

Trong ví dụ trên, useFormStatus trả về một object chứa các thông tin hữu ích về trạng thái của form:

  • pending: Một boolean cho biết form đang được submit hay không.
  • data: Dữ liệu được gửi đi từ form.
  • method: Phương thức HTTP được sử dụng (GET hoặc POST).
  • action: Hành động được thực hiện khi form được submit.

Ví Dụ Thực Tế

Giả sử bạn đang xây dựng một form đăng ký người dùng, và bạn muốn hiển thị thông báo "Đang xử lý..." khi người dùng nhấn nút Submit. Bạn có thể làm điều này một cách dễ dàng với useFormStatus:

function RegistrationForm() {
  return (
    <form action="/register" method="post">
      <input type="text" name="username" placeholder="Username" required />
      <input type="password" name="password" placeholder="Password" required />
      <SubmitButton />
    </form>
  )
}

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Đang xử lý..." : "Đăng ký"}
    </button>
  )
}

Khi người dùng nhấn nút "Đăng ký", nút sẽ chuyển sang trạng thái "Đang xử lý..." và bị vô hiệu hóa cho đến khi quá trình submit hoàn tất. Đơn giản mà hiệu quả, phải không nào?

Lợi Ích Của useFormStatus

  1. Đơn Giản Hóa Code: Bạn không cần phải tự quản lý trạng thái của form bằng các state phức tạp.
  2. Cải Thiện UX: Người dùng sẽ nhận được phản hồi ngay lập tức khi form đang được xử lý, giúp trải nghiệm của họ trở nên mượt mà hơn.
  3. Tích Hợp Dễ Dàng: useFormStatus có thể được sử dụng trong bất kỳ component nào mà không cần thay đổi cấu trúc code hiện có.

Pitfall (Cạm Bẫy) Khi Sử Dụng useFormStatus

Dù useFormStatus rất tiện lợi, nhưng cũng có một số điểm bạn cần lưu ý để tránh gặp phải những lỗi không mong muốn. Dưới đây là một số "cạm bẫy" mà React đã đề cập trong tài liệu chính thức:

  1. Chỉ Hoạt Động Trong Component Con Của Form: useFormStatus chỉ hoạt động trong các component con của form. Nếu bạn cố gắng sử dụng nó bên ngoài phạm vi của form, nó sẽ không hoạt động như mong đợi. Hãy đảm bảo rằng bạn chỉ sử dụng hook này trong các component được render bên trong một form.

  2. Không Thể Sử Dụng Trong Component Cha: useFormStatus không thể được sử dụng trong component cha của form. Nó chỉ có thể được sử dụng trong các component con trực tiếp của form. Điều này có nghĩa là bạn cần thiết kế cấu trúc component của mình một cách cẩn thận để đảm bảo hook này hoạt động đúng cách.

  3. Phụ Thuộc Vào Context: useFormStatus sử dụng React Context để truyền thông tin về trạng thái của form. Điều này có nghĩa là nó chỉ hoạt động trong các component được bao bọc bởi context của form. Ngược lại, nó sẽ không hoạt động.

  4. Không Thể Sử Dụng Với Custom Form Handling: Nếu bạn đang sử dụng một thư viện hoặc phương pháp custom để xử lý form, useFormStatus có thể không hoạt động như mong đợi. Hook này được thiết kế để hoạt động với các form HTML tiêu chuẩn, vì vậy nếu bạn sử dụng các phương pháp xử lý form khác, bạn có thể cần phải tìm kiếm các giải pháp thay thế.

Kết Luận

useFormStatus là một công cụ cực kỳ hữu ích giúp bạn quản lý trạng thái của form một cách dễ dàng và hiệu quả. Tuy nhiên, như với bất kỳ công cụ nào, việc hiểu rõ các hạn chế và cạm bẫy của nó là rất quan trọng để tránh những lỗi không mong muốn. Hy vọng bài viết này đã mang lại cho bạn những thông tin hữu ích.