react tutorial reactjsdevelopment webdev

Chào React 19: Phiên Bản Nâng Cấp Khiến Developer Vui Phấn Khích (Và Ứng Dụng Nhanh Hơn Gấp Bội)!

Lê Lân

15/08/2025

React 19: Những Tính Năng Mới Giúp Tối Ưu Lập Trình Và Tăng Tốc Ứng Dụng

Mở Đầu

React 19 ra mắt vào ngày December 5, 2024 đã tạo ra một bước đột phá cho lập trình frontend với những tính năng giúp giảm thiểu mã nguồn và cải thiện hiệu suất ứng dụng một cách đáng kể.

Nếu bạn là người mới bắt đầu hoặc đang tìm kiếm cách làm cho ứng dụng React của mình trở nên mượt mà, tối ưu hơn, bài viết này sẽ giúp bạn khám phá các tính năng nổi bật nhất kèm ví dụ đơn giản, dễ hiểu. Từ Actions cho đến Server Components, mỗi tính năng đều là một bước tiến quan trọng giúp lập trình React trở nên dễ dàng và hiệu quả hơn. Hãy cùng tôi bắt đầu hành trình này nhé! 🚀

1. Actions: Tối Ưu Xử Lý Form cực Đơn Giản

1.1. Actions là gì?

Actions cho phép bạn gắn trực tiếp một form với hàm xử lý dữ liệu, dù xử lý phía client hay server.

React tự động quản lý trạng thái loading và xử lý lỗi, giúp giảm đáng kể việc viết code rườm rà.

Sau nhiều năm vật lộn với các thư viện form như Formik, tôi thấy Actions như một “làn gió mới” giúp đơn giản hóa mọi thứ.

Dễ dàng kiểm soát hành vi form mà không cần viết thêm nhiều dòng code để xử lý trạng thái và lỗi.

1.2. Ví dụ: Form cập nhật tên người dùng với Actions

import { useActionState } from 'react';

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const name = formData.get('name');
      const error = await updateName(name); // Giả lập API
      if (error) return error;
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" placeholder="Enter your name" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Saving...' : 'Save'}
      </button>
      {error && <p>Oops! {error}</p>}
    </form>
  );
}

1.3. Vì sao Actions tuyệt vời?

Giảm lượng code, giúp bạn ít gặp lỗi và chóng khắc phục bugs hơn.

Tự động reset form sau khi gửi thành công, tạo trải nghiệm người dùng mượt mà.

Phù hợp với người mới vì giảm tải công việc quản lý trạng thái trong React.

2. useOptimistic: Phản Hồi Ngay Lập Tức Cho Người Dùng

2.1. useOptimistic hoạt động thế nào?

Giúp cập nhật thông tin giao diện ngay lập tức theo “lạc quan” trước khi server phản hồi.

Nếu xảy ra lỗi, React tự động quay lại trạng thái cũ, tránh hiển thị thông tin sai.

2.2. Ví dụ: Cập nhật tên người dùng với useOptimistic

import { useOptimistic } from 'react';

function ChangeName({ currentName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get('name');
    setOptimisticName(newName); // Hiện tên mới ngay lập tức
    const updatedName = await updateName(newName); // API giả lập
    return updatedName;
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Update Name</button>
    </form>
  );
}

2.3. Ưu điểm nổi bật

Cảm giác ứng dụng “nhanh như chớp” với phản hồi tức thời.

Tự động rollback nếu xử lý phía server thất bại.

Rất dễ dùng, chỉ một hook duy nhất xử lý toàn bộ.

Lưu ý: Nên có thêm phần thông báo lỗi như toast để người dùng không bị nhầm lẫn khi dữ liệu rollback.

3. useFormStatus: Nút Submit Thông Minh

3.1. Giới thiệu useFormStatus

Hook này cho phép các thành phần con kiểm tra trạng thái của form một cách dễ dàng.

Bạn có thể disable nút submit hoặc hiển thị trạng thái “Loading...” mà không cần truyền props phức tạp.

3.2. Ví dụ: Nút submit biết trạng thái form

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function MyForm() {
  const submitAction = async (formData) => {
    await saveData(formData); // API giả lập
  };

  return (
    <form action={submitAction}>
      <input type="text" name="data" />
      <SubmitButton />
    </form>
  );
}

3.3. Lý do nên dùng useFormStatus

Loại bỏ việc truyền props từ form xuống nút submit (không còn prop drilling).

Code sạch, phân tách rõ ràng nhiệm vụ từng component.

Cải thiện trải nghiệm người dùng với các nút thông minh và chuyên nghiệp hơn.

4. React Compiler: Giúp Tự Động Tối Ưu Hiệu Năng

4.1. React Compiler (React Forget) là gì?

Công cụ biên dịch tự động thêm các tối ưu như memoization mà bạn từng phải viết thủ công.

Giúp ứng dụng chạy nhanh hơn mà bạn không phải dùng nhiều useMemo hoặc useCallback .

4.2. Ví dụ: Không cần useMemo nữa trong React 19

Trước React 19:

import { useMemo } from 'react';

function MyComponent({ count }) {
  const doubled = useMemo(() => count * 2, [count]);
  return <div>Doubled: {doubled}</div>;
}

Trong React 19:

function MyComponent({ count }) {
  const doubled = count * 2;
  return <div>Doubled: {doubled}</div>;
}

4.3. Ưu điểm của React Compiler

Viết code ngắn gọn hơn, dễ đọc và bảo trì.

Ứng dụng có hiệu suất cao mà không cần kiến thức sâu về tối ưu.

Phù hợp với người mới, giảm thời gian phát triển.

Lưu ý: Đối với ứng dụng lớn, cần theo dõi kích thước bundle để tránh tối ưu thừa gây tăng dung lượng mã nguồn.

5. Server Components: Ứng Dụng Nhanh Hơn, Ít JavaScript Hơn

5.1. Server Components là gì?

Cho phép chạy một phần giao diện React trên server, gửi chỉ HTML tĩnh đến client.

Giúp giảm lượng JavaScript bundle tải xuống, cải thiện tốc độ tải trang và SEO tốt hơn.

5.2. Ví dụ: Một Server Component lấy dữ liệu người dùng

// UserList.server.jsx
export default async function UserList() {
  const users = await fetch('https://api.example.com/users').then(res => res.json());
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

5.3. Vì sao Server Components tuyệt vời?

Giúp tải trang nhanh hơn đáng kể, đặc biệt với kết nối mạng chậm.

Cải thiện thứ hạng SEO với nội dung được render sẵn trên server.

Phát triển đơn giản: chỉ cần thêm "use server" cho phần code phía server.

Lời khuyên: Cần cân nhắc rõ ràng ranh giới giữa client và server để tránh phức tạp không cần thiết.

6. use API: Đơn Giản Hóa Việc Lấy Dữ Liệu Và Quản Lý Context

6.1. Giới thiệu use API mới

Cho phép bạn lấy dữ liệu từ promise (ví dụ API) hoặc truy cập context một cách trực tiếp.

Hoạt động tốt với React Suspense để hiển thị trạng thái đang tải mượt mà.

6.2. Ví dụ: Lấy dữ liệu với use và Suspense

import { use, Suspense } from 'react';

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment.text}</p>);
}

function App() {
  const commentsPromise = fetch('https://api.example.com/comments').then(res => res.json());
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

6.3. Ưu điểm lớn

Bỏ đi những đoạn mã rườm rà, mất thời gian với useEffect .

Tự xử lý trạng thái loading với Suspense.

Dễ dùng với mọi trình độ, linh hoạt cho cả các trường hợp phức tạp.

Hãy test kỹ các trường hợp ngoại lệ như promise bị lỗi để đảm bảo ứng dụng không gặp sự cố.

Kết Luận

React 19 mang đến một bộ công cụ tuyệt vời giúp lập trình viên từ người mới đến chuyên gia đều có thể làm việc hiệu quả hơn. Từ việc xử lý form thông minh với Actions, trải nghiệm người dùng siêu nhanh nhờ useOptimistic, nút submit tự động hiểu trạng thái với useFormStatus, đến việc tối ưu hiệu suất mà không cần thủ công với React Compiler và tăng tốc độ tải trang kèm SEO nhờ Server Components - tất cả đều tạo nên một nền tảng phát triển web hiện đại vượt trội.

Hãy cập nhật React 19 ngay hôm nay với lệnh:

npm install react@19 react-dom@19

Đừng quên tham khảo React 19 Upgrade Guide để nắm rõ chi tiết. Chúc bạn có những trải nghiệm lập trình thật vui và đừng ngần ngại chia sẻ dự án của bạn trong phần bình luận nhé! 🎉

Tham Khảo

React 19 Official Documentation - https://react.dev

React 19 Upgrade Guide - https://react.dev/docs/getting-started

"Actions in React 19" - React Blog, 2024

"Optimistic UI with useOptimistic" - Frontend Weekly, 2024

"React Server Components Deep Dive" - Smashing Magazine, 2024