React 19 chính thức ra mắt: Khám phá những tính năng mới nổi bật

Phiên bản React 19 đã chính thức được phát hành, mang đến nhiều cải tiến và tính năng thú vị. Bài viết này sẽ hướng dẫn bạn tìm hiểu 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ế.

Actions và xử lý biểu mẫu

Action là một trong những bổ sung lớn nhất trong React 19. Chúng giúp xử lý việc gửi biểu mẫu và thay đổi dữ liệu dễ dàng hơn.

function UpdateProfile() {
 const [error, submitAction, isPending] = useActionState(
 async (previousState, formData) => {
 const name = formData.get("name");
 try {
 await updateProfile(name);
 return null; // No error
 } catch (err) {
 return "Failed to update profile";
 }
 },
 null
 );
return (
 <form action={submitAction}>
 <input type="text" name="name" />
 <button type="submit" disabled={isPending}>
 {isPending ? "Updating…" : "Update Profile"}
 </button>
 {error && <p className="error">{error}</p>}
 </form>
 );
}

Sử dụng Form Status

Hook useFormStatus mới giúp dễ dàng hiển thị trạng thái loading.

import { useFormStatus } from 'react-dom';
function SubmitButton() {
 const { pending } = useFormStatus();

 return (
 <button disabled={pending}>
 {pending ? 'Submitting…' : 'Submit'}
 </button>
 );
}

Hook mới: useOptimistic

Hook này giúp tạo phản hồi tức thời trong khi chờ phản hồi của máy chủ:

import { use } from 'react';
function UserProfile({ userPromise }) {
 const user = use(userPromise);

 return (
 <div>
 <h1>{user.name}</h1>
 <p>{user.email}</p>
 </div>
 );
}

Hỗ trợ các thẻ metadata

React 19 hỗ trợ các thẻ metadata một cách tự nhiên. Giờ đây, bạn có thể thêm các thẻ <title>, <meta>, và <link> trực tiếp trong component để quản lý metadata của tài liệu. Việc này giúp tối ưu SEO và cải thiện khả năng chia sẻ nội dung trên mạng xã hội.

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>
 );
}

Tối ưu hóa tải tài nguyên

React 19 cung cấp các API mới để tối ưu hóa việc tải tài nguyên. Các hàm preload, preinit, và preconnect cho phép bạn tải trước các tài nguyên quan trọng như font, CSS, và kết nối đến API. Điều này giúp cải thiện hiệu suất của ứng dụng.

import { preload, preinit, preconnect } from 'react-dom';
function App() {
 // Preload important resources
 preload('/fonts/main.woff2', { as: 'font' });
 preinit('/styles/critical.css', { as: 'style' });
 preconnect('https://api.example.com');
return <Main />;
}

Hỗ trợ các web component

React 19 hiện hỗ trợ đầy đủ các component tùy chỉnh:

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

Những cải tiến khác trong React 19

1. Ref như một Prop

// Old way with forwardRef
const OldInput = forwardRef((props, ref) => (
 <input ref={ref} {…props} />
));
// New way in React 19
function NewInput({ ref, …props }) {
 return <input ref={ref} {…props} />;
}

2. Báo cáo lỗi tốt hơn

React 19 cung cấp các thông báo lỗi rõ ràng hơn và báo cáo lỗi hydration tốt hơn. Bạn có thể sử dụng các tùy chọn onCaughtError và onUncaughtError khi tạo root để xử lý các lỗi.

const root = createRoot(container, {
 onCaughtError: (error) => {
 // Handle errors caught by Error Boundaries
 logError(error);
 },
 onUncaughtError: (error) => {
 // Handle errors not caught by Error Boundaries
 reportFatalError(error);
 }
});

Kết luận

React 19 mang đến nhiều tính năng thú vị giúp việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn. Các khả năng xử lý form mới, các hook mới, và việc tải tài nguyên được cải thiện sẽ giúp các nhà phát triển xây dựng các ứng dụng tốt hơn với ít code hơn. Tuy nhiên, bạn nên kiểm tra kỹ lưỡng khi nâng cấp các ứng dụng hiện có lên React 19. Để biết thêm thông tin, hãy xem thông báo chính thức và tài liệu của React 19.