React 19: Compiler, Server Components, Actions – Tính năng mới

React 19 chính thức phát hành ổn định vào tháng 12/2024, mang đến những thay đổi kiến trúc lớn nhất kể từ/hooks. Phiên bản này tập trung vào Server Components, Actions, hook use(), và hỗ trợ metadata native — đặt nền móng cho ứng dụng full-stack hiện đại.

React Compiler (trước đây là Forget): Tự động memoize

React Compiler không gói kèm trong bản phát hành ổn định của React 19. Đây là một trình biên dịch riêng, chọn tham gia (opt-in), tự động thêm memoization cho component, hook và giá trị — loại bỏ nhu cầu viết thủ công useMemo, useCallback, hay React.memo. Compiler phân tích dependency tại thời điểm build và sinh mã tối ưu, giảm re-render không cần thiết mà không thay đổi logic ứng dụng.

Để kích hoạt, cài đặt @react/compiler và cấu hình trong bundler (Vite, Webpack, Next.js). React 19 cung cấp các API runtime cần thiết để Compiler hoạt động, nhưng Compiler bản thân phát hành riêng.

Server Components: Ổn định trong React 19

React Server Components (RSC) giờ đây ổn định. Khác với Client Component chạy trong trình duyệt, Server Component render trước (ahead-of-time) trong môi trường server tách biệt, không gửi JavaScript xuống client. Kết quả là HTML tĩnh hoặc stream, giảm bundle size đáng kể.

Điểm quan trọng: Server Component không dùng directive "use server" — directive đó dành cho Server Actions. Thư viện có thể target điều kiện export react-server như peer dependency để tối ưu cho môi trường server.

Server Actions: Chạy mã server từ client

Server Actions cho phép Client Component gọi hàm async chạy trên server. Đánh dấu bằng directive "use server" ở đầu hàm. React tự động sinh endpoint, serialize tham số, gọi server và trả kết quả — như RPC nhưng tích hợp sẵn vào cycle render.

Server Action có thể tạo trong Server Component và truyền như prop cho Client Component. Điều này cho phép pattern: Server Component lấy dữ liệu, tạo action, truyền cho Client Component xử lý form/interaction.

Hook use(): Đọc Context và Promise linh hoạt

Hook use() mới trong React 19 có 2 chế độ:

• use(context) — đọc Context, có thể gọi bên trong điều kiện (if) và vòng lặp — khác với useContext chỉ dùng ở top-level.
• use(promise) — đọc Promise từ Context, cho phép chia sẻ dữ liệu async không cần prop drilling. Component sẽ suspend cho đến khi Promise resolve.

Luôn bọc component dùng use(promise) trong để chỉ subtree đó bị treo chờ dữ liệu.

Xử lý form với Actions

React 19 hỗ trợ native trong Server Component — bật progressive enhancement: form hoạt động ngay cả khi JS chưa load xong. Khi submit, React gửi request đến server function, chờ kết quả, rồi cập nhật UI.

Hai hook hỗ trợ:

• useFormStatus() — đọc trạng thái pending khi form đang submit.
• useOptimistic() — cập nhật UI lạc quan trước khi background operation hoàn tất.

Metadata tags: