Hướng Dẫn Nâng Cấp React 18 lên React 19

React 19 đã chính thức ra mắt với nhiều tính năng mới như memo hóa tự động, ngữ cảnh an toàn với async, hành động cho biểu mẫu, thành phần máy chủ ổn định và tải tài sản thông minh hơn. Nếu bạn đang sử dụng React 18, việc nâng cấp là rất đáng giá.

Nhưng làm thế nào để bạn thực hiện việc này mà không làm hỏng ứng dụng của mình? Dưới đây là hướng dẫn chi tiết từng bước để nâng cấp lên React 19 cùng với những cạm bẫy cần tránh.

Mục Lục

• Bước 1: Cập nhật các phụ thuộc
• Bước 2: Loại bỏ memo hóa không cần thiết
• Bước 3: Tái cấu trúc biểu mẫu để sử dụng hành động
• Bước 4: Sử dụng ngữ cảnh async với use()
• Bước 5: Chấp nhận các thành phần máy chủ
• Bước 6: Kiểm tra việc tải tài sản
• Bước 7: Kiểm tra kỹ lưỡng
• Danh sách kiểm tra nâng cấp
• Kết luận

Bước 1: Cập nhật các phụ thuộc

Trong thư mục gốc của dự án, cập nhật React và ReactDOM lên phiên bản 19:

npm install react@19 react-dom@19

Hoặc nếu bạn đang sử dụng Yarn:

yarn add react@19 react-dom@19

Nếu bạn đang sử dụng Next.js hoặc Remix, hãy đảm bảo rằng bạn đang ở một phiên bản hỗ trợ React 19 (Next.js 15+).

Bước 2: Loại bỏ memo hóa không cần thiết

React 19 bao gồm Trình biên dịch React, tự động memo hóa các thành phần.

Bạn có thể an toàn loại bỏ một số lời gọi React.memo, useMemo, và useCallback mà chỉ được sử dụng vì lý do hiệu suất.

Trước (React 18):

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

Sau (React 19):

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

Mã sạch hơn, hiệu suất vẫn như cũ.

Mẹo: Đừng loại bỏ memo hóa một cách mù quáng — hãy giữ nó ở những nơi bạn muốn ngăn chặn việc re-render dựa trên props.

Bước 3: Tái cấu trúc biểu mẫu để sử dụng hành động

React 19 giới thiệu hành động cho biểu mẫu, làm cho các biểu mẫu trở nên rõ ràng hơn.

Trước (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>;
}

Sau (React 19):

function CommentForm() {
  async function postComment(formData) {
    "use server";
    await db.comments.create(formData);
  }
  return (
    <form action={postComment}>
      <input name="text" />
      <button type="submit">Đăng</button>
    </form>
  );
}

Mã sạch hơn, dễ bảo trì hơn và hỗ trợ máy chủ tích hợp.

Bước 4: Sử dụng ngữ cảnh async với use()

Ngữ cảnh trong React 18 không phải lúc nào cũng an toàn với Suspense và render async.

Trước (React 18):

const ThemeContext = createContext("light");
const theme = useContext(ThemeContext);

Sau (React 19):

const ThemeContext = createContext("light");
const theme = use(ThemeContext); // an toàn với async 🎉

Bước 5: Chấp nhận các thành phần máy chủ (nếu sử dụng Next.js/Remix)

React 19 ổn định Các thành phần máy chủ, có nghĩa là:

• Các gói client nhỏ hơn
• SSR (render phía máy chủ) nhanh hơn
• Lấy dữ liệu phía máy chủ sạch hơn

Nếu bạn đang sử dụng Next.js 15, hãy bắt đầu di chuyển các thành phần không tương tác sang phía máy chủ.

Ví dụ:

// Thành phần máy chủ React 19
export default async function UserList() {
  const users = await db.users.getAll();
  return users.map(u => <p key={u.id}>{u.name}</p>);
}

Bước 6: Kiểm tra việc tải tài sản

React 19 cải thiện cách tải tài sản (phông chữ, kiểu, kịch bản). Nếu bạn đã thực hiện việc tải trước bằng <link>, bạn có thể đơn giản hóa cấu hình của mình.

Mẹo nâng cấp: Chạy Lighthouse hoặc Web Vitals trước và sau khi nâng cấp để xác minh các cải tiến.

Bước 7: Kiểm tra kỹ lưỡng

Mặc dù React 19 tương thích ngược với hầu hết mã React 18, nhưng hãy kiểm tra kỹ lưỡng:

• Chạy các bài kiểm tra đơn vị và tích hợp
• Kiểm tra hành vi Suspense và chuyển tiếp
• Xác minh các biểu mẫu và hành động máy chủ
• Kiểm tra việc sử dụng ngữ cảnh

Danh sách kiểm tra nâng cấp

• Cập nhật React và ReactDOM lên phiên bản 19
• Dọn dẹp memo hóa không cần thiết
• Tái cấu trúc các biểu mẫu để sử dụng hành động nếu có thể
• Chuyển sang use() cho ngữ cảnh async
• Áp dụng các thành phần máy chủ trong các ứng dụng Next.js/Remix
• Xác thực các cải tiến tải tài sản
• Kiểm tra tất cả các thành phần và quy trình

Kết luận

Việc nâng cấp từ React 18 lên React 19 chủ yếu là mượt mà:

• Mã React 18 hiện tại của bạn vẫn sẽ hoạt động
• Các tính năng mới giảm bớt mã dư thừa
• Các quy trình làm việc dựa trên máy chủ dễ dàng hơn bao giờ hết

Nếu bạn đã sử dụng React 18, việc nâng cấp lên 19 là điều hiển nhiên — đặc biệt nếu bạn đang sử dụng Next.js 15 hoặc dự định sử dụng các thành phần máy chủ.

Bạn đã bắt đầu nâng cấp ứng dụng của mình lên React 19 chưa? Hãy chia sẻ trải nghiệm của bạn trong phần bình luận — điều gì đã hoạt động, điều gì bị hỏng và điều gì bạn thích tính đến thời điểm này!

Bạn có muốn tôi chuẩn bị một bài viết về “Các Thực Hành Tốt Nhất trong React 19” (hướng dẫn cách viết mã hiện đại, sạch sẽ với các tính năng mới) như một phần tiếp theo trong chuỗi không?