React v19 - Actions, Server Components, cải thiện lỗi Hydration, hỗ trợ Document Metadata và nhiều hơn nữa

API và tính năng mới

• Actions: Tự động xử lý thay đổi dữ liệu và cập nhật trạng thái. Tự động quản lý trạng thái chờ, lỗi, optimistic update, v.v.
• useActionState: Hook mới giúp xử lý đơn giản các trường hợp sử dụng phổ biến của Actions
• use API: Có thể đọc promise và context trong khi render
• useOptimistic: Dễ dàng triển khai cập nhật optimistic UI trong khi chờ yêu cầu bất đồng bộ
• ref as a prop: Có thể dùng trực tiếp prop ref trong function component (forwardRef không còn cần thiết)
• <Context> as a Provider: Có thể dùng trực tiếp <Context> thay cho <Context.Provider>

Quản lý tài liệu và tài nguyên

• Hỗ trợ metadata: Có thể dùng trực tiếp các thẻ <title>, <link>, <meta> trong component
• Hỗ trợ stylesheet: Tải stylesheet và quản lý độ ưu tiên ngay trong component
• Hỗ trợ script bất đồng bộ: Có thể render script bất đồng bộ ở bất kỳ đâu trong cây component
• Preloading tài nguyên: Cung cấp các API prefetchDNS, preconnect, preload, preinit để tối ưu hiệu năng

Cải tiến

• Hỗ trợ custom element: Bổ sung hỗ trợ đầy đủ cho custom element
• Cải thiện xử lý lỗi: Loại bỏ lỗi trùng lặp và thêm các tùy chọn xử lý lỗi
• Tương thích với script/tiện ích mở rộng bên thứ ba: Cải thiện việc xử lý nội dung bên thứ ba trong quá trình hydration
• Cải thiện lỗi hydration: Cung cấp thông báo lỗi rõ ràng hơn và thông tin debug tốt hơn

Server Components

• Server Components được ổn định hóa: Tất cả tính năng Server Components trong kênh Canary đều được đưa vào React 19
• Server Actions: Cung cấp khả năng gọi hàm trên server từ client component

Khác

• Giá trị khởi tạo cho useDeferredValue: Thêm tùy chọn giá trị khởi tạo cho useDeferredValue
• Hàm dọn dẹp ref (cleanup): Có thể trả về hàm dọn dẹp từ callback ref
• Static API mới: Bổ sung các API prerender và prerenderToNodeStream

[carnoxen]

Trong phiên bản 19 này, cách hoạt động từng gây nhiều tranh cãi của <Suspense> đã được định nghĩa lại. Trước đây, khi một component bị Suspense thì React sẽ tiếp tục render đến component Suspense tiếp theo rồi mới tạo fallback, nhưng hiện tại đã đổi thành khi một component bị Suspense thì sẽ tạo fallback trước rồi mới render component Suspense tiếp theo.

Improvements to Suspense

Nói ngắn gọn là thời gian render lần đầu đã được rút ngắn. Thật may là vấn đề này đã được giải quyết ổn thỏa.