Quay lại trang chủ

React 19: Có gì mới? 🚀

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!

img_0


1. Hành động là chìa khóa: Giới thiệu Actions

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!

Trước đây: Bạn tự lo hết mọi thứ, từ pending state đến error state.

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

Giờ đây: Dùng useTransition để xử lý pending state tự động.

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ý:

  • Pending state: Tự động bật/tắt trạng thái pending.
  • Optimistic updates: Hỗ trợ useOptimistic để cập nhật "ảo" ngay lập tức.
  • Error handling: Hiển thị lỗi thông qua Error Boundaries, tự động rollback nếu cần.
  • Forms: Hỗ trợ các props như action hoặc formAction để submit form dễ dàng hơn.

2. Hook mới: useActionState

img_0

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.


3. Xử lý form tự động với <form> Actions

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

4. Hook mới: useOptimistic

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

5. API mới: use

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.


6. Hỗ trợ Metadata và Stylesheets tốt hơn

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.


7. Tối ưu hóa preload tài nguyên

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

Kết luận: React 19 – Một bước tiến lớn!

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! 🚀