React 20 Alpha chính thức ra mắt: React Compiler trở thành mặc định, kỷ nguyên "thủ công" tối ưu hóa đã kết thúc

[Baron Darkness]

React 20 Alpha chính thức ra mắt: React Compiler trở thành mặc định, kỷ nguyên "thủ công" tối ưu hóa đã kết thúc

Đúng như lộ trình đã rò rỉ từ Hội nghị React Conf hồi giữa năm, Meta vừa chính thức công bố bản React 20 Alpha vào sáng nay (theo giờ Việt Nam). Thay đổi mang tính cách mạng nhất không phải là một Hook mới, mà là một sự thay thế hoàn toàn về tư duy: React Compiler giờ đây được bật theo mặc định. Điều này đồng nghĩa với việc useMemo, useCallback, và khái niệm "dependency array" (mảng phụ thuộc) phức tạp sắp trở thành dĩ vãng.

1. React Compiler: Từ "Thử nghiệm" đến "Trái tim" của React​

Sau giai đoạn Beta kéo dài suốt năm 2024 và đầu 2025 trong phiên bản React 19, React Compiler (tên mã cũ là React Forget) đã đạt độ ổn định cần thiết để trở thành tiêu chuẩn.

Trước đây, để tránh việc re-render (kết xuất lại) không cần thiết, lập trình viên phải thủ công bọc các component và hàm trong memo, useMemo hoặc useCallback. Điều này không chỉ làm code trở nên cồng kềnh mà còn dễ gây lỗi nếu khai báo sai dependency array.

Trong React 20 Alpha:

• Zero-config: Compiler tự động phân tích cú pháp (AST) và xác định chính xác khi nào một UI cần cập nhật.
• Fine-grained Reactivity: React giờ đây thông minh hơn trong việc phát hiện thay đổi ở cấp độ hạt nhân, gần giống với cơ chế của SolidJS hay Svelte, nhưng vẫn giữ nguyên mô hình mental model của React.

2. Những cái tên bị "khai tử" và thay đổi lớn​

Sự xuất hiện của Compiler khiến một loạt các API quen thuộc trở nên thừa thãi. Trong changelog của bản Alpha, đội ngũ React Core Team đã đánh dấu "Deprecated" (Lỗi thời) cho các API sau:

• useMemo & useCallback: Vẫn hoạt động để tương thích ngược, nhưng Linter sẽ cảnh báo khuyên bạn nên gỡ bỏ vì Compiler đã tự động làm việc này tốt hơn con người.
• memo (HOC): Không còn cần thiết để bọc component.
• forwardRef: Đã bắt đầu bị loại bỏ từ React 19, nhưng đến React 20, ref chính thức được truyền xuống như một prop thông thường (prop drilling) mà không cần wrapper nào.

3. Hiệu năng thực tế: Con số biết nói​

Theo báo cáo benchmark từ Vercel và Shopify (những đối tác thử nghiệm sớm), việc chuyển đổi sang React 20 mang lại những cải thiện đáng kể:

• Giảm 40% dung lượng code logic: Do loại bỏ được hàng ngàn dòng code boilerplate liên quan đến memoization.
• Tăng 25% điểm INP (Interaction to Next Paint): Nhờ việc trình duyệt không phải tốn tài nguyên tính toán các dependency array phức tạp tại runtime.
• Khởi động nhanh hơn: Quá trình Hydration trên máy khách (Client-side hydration) mượt mà hơn nhờ cấu trúc cây component được tối ưu hóa tĩnh ngay từ khâu build.

4. Tác động đến Lập trình viên và Doanh nghiệp​

Đối với Lập trình viên​

Tư duy lập trình sẽ quay về trạng thái "Just JavaScript". Bạn không cần phải lo lắng về việc biến const style = {} gây re-render component con nữa. Việc review code (Code Review) sẽ tập trung vào logic nghiệp vụ thay vì soi lỗi kỹ thuật về performance.

Đối với Doanh nghiệp​

Chi phí bảo trì dự án sẽ giảm. Việc training nhân sự mới (Onboarding) sẽ nhanh hơn do rào cản về "React mental model" (vốn nổi tiếng khó nhằn với người mới) đã được hạ thấp đáng kể.

5. Lộ trình phát hành​

Hiện tại, React 20 Alpha đã có sẵn trên npm dưới tag @next.

• Alpha/Beta: Quý 4/2025.
• Release Candidate (RC): Tháng 3/2026.
• Stable: Dự kiến ra mắt chính thức vào mùa hè 2026.

 

Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.