React 19 trong Next.js: Cách dùng hook useActionState và useOptimistic thay thế Redux

Phiên bản React 19 chính thức ra mắt mang đến cuộc cách mạng về cách quản lý trạng thái (State Management) và xử lý biểu mẫu (Form handling) trên các ứng dụng Next.js. Với sự xuất hiện của hai custom hook mạnh mẽ là useActionState và useOptimistic, bạn có thể loại bỏ hoàn toàn hàng ngàn dòng code Redux hay Boilerplate dư thừa!

1. Hook useActionState — Quản lý trạng thái Form bất đồng bộ

Trước đây, muốn gửi Form và theo dõi trạng thái isPending, error, bạn phải tạo 3-4 useState thủ công. useActionState đơn giản hóa toàn bộ luồng xử lý:

import { useActionState } from 'react';
import { updateProfile } from './actions';

export default function ProfileForm() {
  const [state, formAction, isPending] = useActionState(updateProfile, null);

  return (
    <form action={formAction}>
      <input name="username" defaultValue={state?.username} />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Đang lưu...' : 'Cập nhật'}
      </button>
    </form>
  );
}

2. Hook useOptimistic — Phản hồi giao diện 0ms tức thì

Khi người dùng nhấn "Thích" (Like) hoặc gửi bình luận, thay vì bắt người dùng chờ Server trả về kết quả, useOptimistic cập nhật giao diện **ngay lập tức trong 0ms**. Nếu Server báo lỗi, giao diện tự động khôi phục về trạng thái cũ!

import { useOptimistic } from 'react';

export function LikeButton({ likes, onLike }) {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (current, amount) => current + amount
  );

  return (
    <button onClick={async () => {
      setOptimisticLikes(1);
      await onLike();
    }}>
      👍 {optimisticLikes} Lượt thích
    </button>
  );
}

3. Lợi ích của React 19 đối với SEO & Performance

• Giảm dung lượng JavaScript Bundle: Không cần cài thêm các thư viện State Management cồng kềnh.
• Tối ưu chỉ số INP (Interaction to Next Paint): Giao diện phản hồi thao tác nhấp chuột ngay lập tức.
• Tương thích hoàn hảo với Server Actions: Gửi dữ liệu trực tiếp tới Database mà không cần tạo REST API.

Kết luận

Làm chủ React 19 giúp bạn xây dựng các ứng dụng Web Next.js tốc độ cao và code cực kỳ sạch sẽ. Uwmee Software cập nhật nền tảng React 19 mới nhất cho mọi sản phẩm thiết kế website Next.js. Đọc thêm bài viết Server Actions vs API Routes.