React 19 Đã Chính Thức Ra Mắt

Phiên bản React 19 đã chính thức được phát hành, mang đến một loạt các cải tiến và tính năng mới thú vị. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn chi tiết những cập nhật quan trọng nhất của React 19 kèm theo các ví dụ thực tế để bạn có thể áp dụng trong dự án của mình.

1. Tính Năng Mới: Actions và Xử Lý Biểu Mẫu

Một trong những bổ sung lớn nhất của React 19 chính là tính năng Actions. Tính năng này giúp việc xử lý việc gửi biểu mẫu và thay đổi dữ liệu trở nên dễ dàng hơn bao giờ hết. Dưới đây là một ví dụ về cách sử dụng Actions:

function UpdateProfile() {
 const [error, submitAction, isPending] = useActionState(
 async (previousState, formData) => {
 const name = formData.get("name");
 try {
 await updateProfile(name);
 return null; // Không có lỗi
 } catch (err) {
 return "Không thể cập nhật hồ sơ";
 }
 },
 null
 );
 return (
 <form action={submitAction}>
 <input type="text" name="name" />
 <button type="submit" disabled={isPending}>
 {isPending ? "Đang Cập Nhật…" : "Cập Nhật Hồ Sơ"}
 </button>
 {error && <p className="error">{error}</p>}
 </form>
 );
}

2. Sử Dụng Form Status

React 19 giới thiệu Hook useFormStatus, giúp dễ dàng hiển thị trạng thái loading khi gửi biểu mẫu. Dưới đây là ví dụ để minh họa việc sử dụng:

import { useFormStatus } from 'react-dom';
function SubmitButton() {
 const { pending } = useFormStatus();
 return (
 <button disabled={pending}>
 {pending ? 'Đang Gửi…' : 'Gửi'}
 </button>
 );
}

3. Hook Mới: useOptimistic

Hook useOptimistic trong React 19 cho phép bạn tạo phản hồi tức thì trong khi chờ đợi phản hồi từ máy chủ. Xem ví dụ bên dưới:

import { use } from 'react';
function UserProfile({ userPromise }) {
 const user = use(userPromise);
 return (
 <div>
 <h1>{user.name}</h1>
 <p>{user.email}</p>
 </div>
 );
}

4. Hỗ Trợ Metadata Mới

React 19 hỗ trợ việc thêm các thẻ metadata như <title>, <meta>, và <link> một cách tự động, giúp cải thiện SEO và khả năng chia sẻ nội dung. Dưới đây là ví dụ chi tiết:

function BlogPost({ post }) {
 return (
 <article>
 <title>{post.title}</title>
 <meta name="description" content={post.summary} />
 <link rel="canonical" href={post.url} />
 <h1>{post.title}</h1>
 <p>{post.content}</p>
 </article>
 );
}

5. Tối Ưu Hóa Tải Tài Nguyên

Với React 19, bạn có thể tối ưu hóa việc tải các tài nguyên quan trọng như font chữ và CSS với các API mới như preload, preinit, và preconnect:

import { preload, preinit, preconnect } from 'react-dom';
function App() {
 // Preload các tài nguyên quan trọng
 preload('/fonts/main.woff2', { as: 'font' });
 preinit('/styles/critical.css', { as: 'style' });
 preconnect('https://api.example.com');
 return <Main />;
}

6. Hỗ Trợ Các Web Component

React 19 cung cấp hỗ trợ đầy đủ cho các web component tùy chỉnh. Dưới đây là một ví dụ:

function App() {
 return (
 <div>
 <custom-element
 stringProp="hello"
 numberProp={42}
 objectProp={{ foo: 'bar' }}
 onCustomEvent={(e) => console.log(e.detail)}
 />
 </div>
 );
}

7. Những Cải Tiến Khác Trong React 19

a. Ref Như Một Prop

Thay vì sử dụng forwardRef, bạn có thể sử dụng cách mới trong React 19:

function NewInput({ ref, …props }) {
 return <input ref={ref} {…props} />;
}

b. Báo Cáo Lỗi Tốt Hơn

React 19 nâng cấp khả năng báo cáo lỗi, giúp bạn xử lý các lỗi một cách hiệu quả hơn với các tùy chọn onCaughtError và onUncaughtError khi tạo root:

const root = createRoot(container, {
 onCaughtError: (error) => {
 logError(error);
 },
 onUncaughtError: (error) => {
 reportFatalError(error);
 }
});

Kết Luận

React 19 mang lại vô số tính năng thú vị giúp việc phát triển ứng dụng trở nên dễ dàng và nhanh chóng hơn. Các tính năng cải tiến về xử lý biểu mẫu, các hook mới, cùng với khả năng tối ưu hóa tải tài nguyên sẽ giúp các nhà phát triển tận dụng được tối đa khả năng của React. Tuy nhiên, hãy kiểm tra cẩn thận khi nâng cấp các ứng dụng hiện có lên React 19. Để tìm hiểu thêm, hãy tham khảo thông báo chính thức và tài liệu của React 19.
source: viblo