Giới thiệu

React 18 đã mang đến những cải tiến đáng kể trong việc xử lý đồng thời, chuyển tiếp và các cải tiến về Suspense. Giờ đây, React 19 đã ra mắt - không chỉ là một bản cập nhật nhỏ, mà còn mang đến nhiều tính năng mới như React Compiler, Async Context và Actions cho biểu mẫu.

Trong hướng dẫn này, chúng ta sẽ phân tích những điểm khác biệt chính giữa React 18 và React 19, kèm theo ví dụ mã nguồn, trường hợp sử dụng thực tế và ý nghĩa của chúng đối với các nhà phát triển.

Mục lục

1. Memoization và Hiệu suất
2. Xử lý Biểu mẫu và Hành động
3. Context Async
4. Components Server
5. Tải Tài nguyên
6. Xử lý Đồng thời
7. Bảng Tóm tắt
8. Kết luận

1. Memoization & Hiệu suất {#memoization}

React 18: Tối ưu hóa Thủ công

React 18 yêu cầu các nhà phát triển tự chọn tối ưu hóa hiệu suất bằng cách sử dụng các công cụ như React.memo, useMemo và useCallback. Mặc dù mạnh mẽ, nhưng chúng cũng làm cho mã trở nên dài dòng.

Ví dụ:

// React 18
const List = React.memo(function List({ items }) {
  return items.map(i => <li key={i}>{i}</li>);
});

Nếu bạn quên React.memo, ngay cả khi props không thay đổi cũng có thể kích hoạt các lần render lại không cần thiết.

Nhược điểm: Mã nguồn dài dòng và có nguy cơ tối ưu hóa quá mức.

React 19: React Compiler (Tự động Memoization)

React 19 đi kèm với React Compiler, tự động memo hóa các component. Điều này có nghĩa là bạn không còn cần bọc mọi thứ với React.memo hay rải useMemo khắp nơi.

// React 19 (không cần memo)
function List({ items }) {
  return items.map(i => <li key={i}>{i}</li>);
}

Lợi ích: Mã nguồn sạch hơn + cải tiến hiệu suất tự động.
Tác động: Tuyệt vời cho các nhóm muốn có hiệu suất tốt hơn mà không cần quản lý từng lần render lại.

2. Xử lý Biểu mẫu & Hành động {#form-actions}

React 18: Trình xử lý sự kiện ở mọi nơi

Việc xử lý biểu mẫu yêu cầu sử dụng onSubmit, ngăn chặn hành vi mặc định và viết các cuộc gọi fetch dài dòng.

// React 18
function CommentForm() {
  async function handleSubmit(e) {
    e.preventDefault();
    await fetch("/api/comment", { 
      method: "POST", 
      body: new FormData(e.target) 
    });
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

Điều này hoạt động nhưng cảm thấy lặp đi lặp lại - đặc biệt khi làm việc với các framework phía server.

React 19: Hành động tích hợp

React 19 giới thiệu Actions cho biểu mẫu, cho phép bạn liên kết trực tiếp với một hàm server.

// React 19
function CommentForm() {
  async function postComment(formData) {
    "use server"; // thông báo cho React rằng điều này chạy trên server
    await db.comments.create(formData);
  }

  return (
    <form action={postComment}>
      <input name="text" />
      <button type="submit">Đăng</button>
    </form>
  );
}

Lợi ích:

• Ít mã hơn
• Phân tách rõ ràng giữa mã client và server
• Tích hợp mượt mà với các component server

3. Context Async {#async-context}

React 18: Context giới hạn trong Async

Trong React 18, context không hoàn toàn an toàn với async. Việc sử dụng nó với Suspense hoặc các component server đôi khi gây ra vấn đề.

// React 18
const ThemeContext = createContext("light");
const theme = useContext(ThemeContext); // có thể gặp lỗi với async

React 19: Context an toàn với Async

React 19 giới thiệu hook mới use() giúp context trở nên an toàn trong các ranh giới async.

// React 19
const ThemeContext = createContext("light");

function Page() {
  const theme = use(ThemeContext); // an toàn với async 🎉
  return <p>Chủ đề: {theme}</p>;
}

Tác động:

• Hoạt động liền mạch với Suspense + rendering phía server
• Không còn phải sử dụng hack hay prop drilling

4. Components Server {#server-components}

React 18: Thí nghiệm

Components Server (RSC) đã được giới thiệu nhưng chưa sẵn sàng cho sản xuất. Chúng cảm thấy mỏng manh, với hỗ trợ framework hạn chế.

React 19: Ổn định và được chấp nhận rộng rãi

Với React 19, Components Server đã ổn định và được hỗ trợ hoàn toàn bởi các framework chính như Next.js 15 và Remix.

Lợi ích:

• Gói client nhỏ hơn
• Render ban đầu nhanh hơn
• Fetch dữ liệu phía server mà không làm nặng client

Nếu bạn đang xây dựng với Next.js, đây là một trong những lý do lớn nhất để áp dụng React 19.

5. Tải Tài nguyên {#asset-loading}

React 18: Tải tài nguyên thủ công

Các nhà phát triển phải quản lý tải tài nguyên thủ công bằng cách sử dụng thẻ <link>.

<link rel="preload" as="font" href="/my-font.woff2" />

React 19: Tải tài nguyên thông minh hơn

React 19 phối hợp tải tài nguyên với rendering, giúp font, styles và scripts tải hiệu quả hơn - giảm thiểu hiện tượng nhấp nháy và cải thiện trải nghiệm người dùng.

Tác động: Tải trang nhanh hơn, đặc biệt trên mạng chậm.

6. Xử lý Đồng thời {#concurrent-rendering}

React 18: Giới thiệu đầu tiên

Xử lý đồng thời (time-slicing, Suspense, transitions) đã được giới thiệu, nhưng vẫn còn các vấn đề nhỏ. Các nhà phát triển đôi khi gặp khó khăn với hành vi không đồng bộ.

React 19: Ổn định hơn

Xử lý đồng thời trong React 19 trở nên đáng tin cậy hơn. Suspense và transitions mượt mà hơn và ít lỗi hơn.

Ví dụ Trường hợp Sử dụng:

• Spinner tải mà không chặn UI
• Cập nhật nền mà không làm đông ứng dụng

Bảng Tóm tắt {#summary-table}

Kết luận {#final-thoughts}

• React 18 đã đặt nền tảng (xử lý đồng thời, Suspense).
• React 19 tập trung vào trải nghiệm phát triển + hiệu suất ngay từ đầu.

Nếu bạn đang sử dụng React 18, việc nâng cấp lên React 19 sẽ mang lại cho bạn:
Mã nguồn sạch hơn (ít mã thừa)
Ứng dụng nhanh hơn với tối ưu hóa tự động
Hỗ trợ tốt hơn cho các framework hiện đại như Next.js 15

Tóm lại: React 18 đã giới thiệu các công cụ, React 19 giúp chúng trở nên dễ sử dụng.

Bạn thích tính năng nào của React 19 nhất? Hãy chia sẻ suy nghĩ của bạn trong phần bình luận!