Quay lại trang chủ
Chào các bạn, lại là tôi đây - một dev thích mày mò và chém gió, nhưng lần này không phải chém suông mà là để kể về React 19, một phiên bản mới toanh, đầy cải tiến khiến ai cũng phải trầm trồ. Hãy cùng xem thử React 19 đã mang đến cho chúng ta những gì nào!
Nếu bạn từng làm một form đơn giản như đổi tên người dùng, chắc hẳn bạn đã từng nhọc công xử lý: pending states, lỗi, cập nhật "ảo" (optimistic updates), rồi còn phải xếp hàng các request nữa chứ. Nhưng giờ đây, React 19 đã giúp tất cả những thứ này trở nên dễ dàng hơn với Actions!
function UpdateName() {
const [name, setName] = useState('');
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect('/path');
};
return (
<div>
<input value={name} onChange={(e) => setName(e.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
function UpdateName() {
const [name, setName] = useState('');
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect('/path');
});
};
return (
<div>
<input value={name} onChange={(e) => setName(e.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
Với Actions, React tự xử lý:
useOptimistic
để cập nhật "ảo" ngay lập tức.action
hoặc formAction
để submit form dễ dàng hơn.Thay vì phải lặp đi lặp lại logic cho các action, giờ đây bạn có thể dùng useActionState để đơn giản hóa:
const [error, submitAction, isPending] = useActionState(
async (prevState, formData) => {
const error = await updateName(formData.get('name'));
if (error) return error;
redirect('/path');
return null;
},
null
);
Kết quả? Bạn có thể gói toàn bộ logic xử lý action vào một hàm gọn nhẹ và để React lo phần còn lại.
Giờ đây, bạn có thể sử dụng <form>
với các action trực tiếp. Khi submit form, React sẽ tự động xử lý dữ liệu và đặt lại form nếu thành công.
function ChangeName() {
const [error, submitAction, isPending] = useActionState(
async (prevState, formData) => {
const error = await updateName(formData.get('name'));
if (error) return error;
redirect('/path');
return null;
}
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</form>
);
}
Cần hiển thị dữ liệu "ảo" trong khi chờ API trả về? useOptimistic chính là thứ bạn cần!
function ChangeName({ currentName, onUpdateName }) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async (formData) => {
const newName = formData.get('name');
setOptimisticName(newName); // Cập nhật ảo ngay lập tức
const updatedName = await updateName(newName);
onUpdateName(updatedName);
};
return (
<form action={submitAction}>
<p>Your name is: {optimisticName}</p>
<input
type="text"
name="name"
disabled={currentName !== optimisticName}
/>
</form>
);
}
React 19 giới thiệu use, một cách mới để xử lý promise hoặc context trong render:
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map((comment) => <p key={comment.id}>{comment}</p>);
}
function Page({ commentsPromise }) {
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
);
}
Lưu ý: use
hỗ trợ đọc các promise từ thư viện hoặc framework có khả năng caching.
React 19 cho phép render các thẻ <title>
, <meta>
, <link>
ngay trong component, đảm bảo chúng được đưa vào <head>
đúng cách:
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta name="author" content="John Doe" />
<link rel="stylesheet" href="styles.css" />
<p>{post.content}</p>
</article>
);
}
Ngoài ra, React còn tích hợp hỗ trợ quản lý stylesheet và script tốt hơn, giúp bạn không phải lo lắng về thứ tự tải hoặc bị trùng lặp.
React 19 bổ sung các API như preload
, preinit
, giúp trình duyệt tải trước các tài nguyên quan trọng một cách hiệu quả:
import { preload } from 'react-dom';
function App() {
preload('/path/to/style.css', { as: 'style' });
preload('/path/to/script.js', { as: 'script' });
}
React 19 mang lại hàng loạt cải tiến từ tối ưu trải nghiệm dev với Actions, đến quản lý form, xử lý metadata và tài nguyên hiệu quả. Với những thay đổi này, React không chỉ mạnh mẽ hơn mà còn giúp bạn code ít hơn, hiệu quả hơn.
Giờ thì, bạn đã sẵn sàng thử nghiệm React 19 chưa? ✨ Code ít, tận hưởng nhiều! 🚀