Cách React 19 giúp bạn dẹp bỏ "ác mộng" xử lý Form

Tạm biệt chuỗi ngày "Loading State" thủ công

Bạn còn nhớ cảm giác mỗi lần làm một cái Form trong React không? Nào là const [isLoading, setIsLoading] = useState(false), rồi lại try-catch, rồi lại phải canh cánh việc setIsLoading(false) ở cuối hàm. Viết đi viết lại hàng chục lần cho hàng chục cái Form khác nhau, thực sự là cực hình. Nếu bạn là một dev hay thức khuya code chỉ để fix mấy cái lỗi trạng thái loading này, thì React 19 chính là cứu cánh mà bạn hằng mong đợi.

Phiên bản mới này giới thiệu một khái niệm cực kỳ quyền năng gọi là Actions. Thay vì phải tự tay quản lý xem dữ liệu đã gửi đi chưa, có lỗi gì không, React 19 sẽ tự động hóa toàn bộ quy trình này. Khi bạn truyền một hàm vào thuộc tính action của thẻ <form>, React sẽ tự động hiểu và quản lý vòng đời của yêu cầu đó cho bạn. Điều này không chỉ giúp code sạch hơn mà còn giảm thiểu tối đa các bug tiềm ẩn khi chúng ta quên cập nhật trạng thái giao diện.

Nhưng đó mới chỉ là khởi đầu, vũ khí thực sự nằm ở các Hook mới đi kèm.

useActionState: "Vũ khí" mới tối giản hóa logic

Nếu Actions là nền tảng, thì useActionState (trước đây gọi là useFormState trong các bản preview) chính là người nhạc trưởng giúp mọi thứ vận hành trơn tru. Hook này cho phép bạn quản lý trạng thái của một Action một cách cực kỳ tinh gọn. Nó trả về kết quả cuối cùng của Action, hàm để kích hoạt Action và cả một biến isPending cực kỳ xịn xò.

const [state, formAction, isPending] = useActionState(async (prevState, formData) => {
  const user = await updateProfile(formData);
  return user;
}, null);

Hãy nhìn đoạn code trên mà xem. Biến isPending sẽ tự động chuyển thành true khi hàm đang chạy và false ngay khi xong. Không còn setIsLoading thủ công nữa! Điều này giúp các bạn Frontend tập trung hoàn toàn vào logic nghiệp vụ thay vì phải đi "trông trẻ" cho các biến trạng thái. Để làm việc cùng Developer hay Designer một cách mượt mà nhất, việc tinh gọn code như thế này giúp dự án dễ bảo trì hơn rất nhiều.

Và nếu bạn muốn giao diện phản hồi ngay lập tức trước cả khi server trả về kết quả? React 19 cũng có quà cho bạn.

Trải nghiệm "nhanh như chớp" với useOptimistic

Người dùng hiện đại cực kỳ thiếu kiên nhẫn. Họ không muốn chờ 1-2 giây để thấy cái vòng quay loading mỗi khi nhấn "Like" hay "Gửi bình luận". Đó là lý do Optimistic Updates (cập nhật lạc quan) ra đời — kỹ thuật hiển thị kết quả thành công ngay lập tức trên giao diện, trong khi dữ liệu vẫn đang được gửi ngầm đến server.

Trong React 19, Hook useOptimistic giúp việc này trở nên dễ dàng đến mức khó tin. Bạn định nghĩa một trạng thái tạm thời, hiển thị nó cho người dùng, và nếu chẳng may server báo lỗi, React sẽ tự động trả giao diện về trạng thái cũ một cách mượt mà. Đây chính là đỉnh cao của trải nghiệm người dùng (UX) mà mọi sản phẩm tại DIA DEMY luôn hướng tới.

• Người dùng thấy kết quả ngay lập tức, cảm giác ứng dụng cực kỳ nhanh.

• Code xử lý logic quay lại (rollback) cực kỳ ngắn gọn, không cần viết hàm logic phức tạp.

• Tích hợp hoàn hảo với hệ sinh thái Server Components mới.

Bạn có thể tham khảo thêm tài liệu chính thức tại React.dev để thấy sự thay đổi khủng khiếp này đã được cộng đồng đón nhận như thế nào.

Tương lai của Frontend đang thay đổi

React 19 không chỉ là một bản cập nhật tính năng, nó là một cuộc cách mạng về tư duy. Chúng ta đang tiến dần đến việc viết code ít hơn nhưng hiệu quả cao hơn, tập trung vào trải nghiệm người dùng thực tế thay vì những dòng code boilerplate nhàm chán. Liệu bạn đã sẵn sàng để nâng cấp dự án của mình lên một tầm cao mới chưa, hay vẫn muốn trung thành với cách xử lý thủ công cũ kỹ?