Cách React 19 Actions giúp bạn "xử đẹp" Form và thoát cảnh code lóng ngóng

Bạn đã bao giờ rơi vào cảnh viết một cái Form (biểu mẫu) đơn giản thôi mà phải tạo tới 3-4 cái useState chỉ để quản lý nào là dữ liệu, nào là trạng thái đang gửi (loading), rồi lại thêm một mảng lỗi (error) chưa? Thú thực đi, cảm giác lúc đó chẳng khác gì đang tung hứng mấy quả bóng cùng lúc, chỉ cần sơ sẩy một nhịp là giao diện "văng" lỗi ngay. Nhưng tin vui là với sự xuất hiện của React 19 Actions, cơn ác mộng đó đã chính thức khép lại.

Thay vì phải tự tay điều phối mọi thứ thủ công như trước, React 19 Actions cho phép chúng ta xử lý luồng dữ liệu một cách tự động và đồng bộ hơn hẳn. Bạn cứ tưởng tượng nó giống như việc thuê một người trợ lý chuyên nghiệp, chỉ cần giao việc "gửi Form này đi" là người đó tự biết hiện icon xoay xoay, tự báo lỗi nếu mạng hẹo, và tự cập nhật giao diện khi xong xuôi. Đây là bước tiến lớn không thua kém gì cách React Compiler giúp chúng ta dẹp bỏ nỗi lo về tối ưu hiệu năng vậy.

Quên đi đống useState và useEffect thừa thãi

Trước đây, mỗi khi người dùng bấm nút Submit, chúng ta thường phải viết một hàm handleSubmit dài dằng dặc, trong đó chứa đủ loại setIsLoading(true) rồi lại try-catch rối rắm. Với React 19 Actions, khái niệm Action được đưa vào như một tính năng cốt lõi của Form. Bạn có thể sử dụng hook useActionState (trước đây gọi là useFormState) để nhận về cả dữ liệu mới nhất lẫn trạng thái của quá trình xử lý.

const [state, formAction, isPending] = useActionState(updateName, null);

return (
  <form action={formAction}>
    <input type="text" name="name" />
    <button disabled={isPending}>Cập nhật</button>
    {state?.error && <p>{state.error}</p>}
  </form>
);

Nhìn vào đoạn mã trên, bạn sẽ thấy biến isPending chính là "vị cứu tinh". Nó tự động chuyển sang true khi Action đang chạy và trả về false khi hoàn tất. Không còn cảnh phải đặt setLoading ở đầu và cuối hàm một cách thủ công nữa. Điều này đặc biệt hữu ích khi kết hợp với Next.js 15 để tạo ra những trang web phản hồi cực nhanh. Bạn có thể tìm hiểu thêm về cách hoạt động của nó tại tài liệu chính thức của React.

Sự tinh gọn này không chỉ giúp file code ngắn đi mà còn giúp bạn né được những lỗi logic ngớ ngẩn thường gặp khi quản lý nhiều state cùng lúc. Vậy nếu muốn giao diện phản hồi ngay lập tức trước cả khi server trả kết quả thì sao? Cùng xem tiếp nhé.

Trải nghiệm mượt mà với useOptimistic

Có bao giờ bạn thắc mắc tại sao khi thả tim trên Facebook hay nhắn tin trên Messenger, giao diện lại thay đổi ngay lập tức mặc dù mạng đang yếu không? Đó chính là nhờ Optimistic UI (giao diện lạc quan). React 19 mang đến hook useOptimistic để giúp chúng ta thực hiện điều này dễ như trở bàn tay.

Khi người dùng thực hiện một Action, useOptimistic sẽ cho phép bạn hiển thị trạng thái "giả định" là thành công ngay lập tức. Nếu sau đó server báo lỗi, React sẽ tự động "quay xe" trả về trạng thái cũ cho bạn. Người dùng sẽ cảm thấy website chạy nhanh như điện, còn bạn thì chẳng cần tốn công viết logic xóa/sửa lại dữ liệu khi thất bại.

• Tăng tốc cảm giác: Người dùng không phải chờ đợi vòng quay của loading.
• Tự động phục hồi: Nếu Action thất bại, UI sẽ tự động quay về trạng thái ban đầu.
• Code sạch: Logic lạc quan được tách biệt rõ ràng với logic thực tế của server.

Thật tuyệt khi thấy React ngày càng quan tâm đến trải nghiệm của cả lập trình viên lẫn người dùng cuối. Giờ đây, việc xây dựng những tính năng phức tạp đã không còn là rào cản quá lớn nữa. Tuy nhiên, còn một mảnh ghép quan trọng khác trong bộ Actions này mà bạn không nên bỏ qua.

Không còn lo lắng về việc quản lý lỗi

Xử lý lỗi (error handling) luôn là phần gây đau đầu nhất. Với cách làm cũ, nếu bạn quên một khối catch, ứng dụng có thể bị treo hoặc hiện màn hình trắng xóa. React 19 Actions kết hợp cùng các tính năng như Error Boundaries giúp việc này trở nên an toàn hơn nhiều. Khi một Action ném ra lỗi, React sẽ bắt được và cho phép bạn hiển thị thông báo lỗi ngay tại Form mà không làm ảnh hưởng đến các phần khác của ứng dụng.

Hơn nữa, việc tích hợp sẵn useFormStatus cũng là một điểm cộng lớn. Hook này cho phép các component con (như cái Button nằm sâu bên trong Form) biết được Form cha có đang bận gửi dữ liệu hay không. Bạn không cần phải truyền props cồng kềnh qua nhiều lớp nữa. Đây chính là triết lý thiết kế hiện đại mà Zustand hay các thư viện quản lý state khác đang hướng tới.

Mọi thứ giờ đây dường như đã vào guồng, giúp bạn tập trung hoàn toàn vào việc xây dựng tính năng thay vì phải đánh vật với những tác vụ lặp đi lặp lại. Bạn đã sẵn sàng để nâng cấp dự án của mình lên React 19 chưa?

Dù việc xử lý Form đã trở nên dễ dàng hơn, nhưng thế giới Frontend vẫn còn rất nhiều điều thú vị đang chờ bạn khám phá, ví dụ như cách chúng ta lấy dữ liệu (fetching) cũng đang có những thay đổi đáng kể với các Server Components mới đấy.

Truy cập ngay DIA DEMY để cập nhật những kiến thức mới nhất về lập trình và thiết kế nhé!