1. Giới thiệu

React 19 Beta đã chính thức được phát hành trên npm! Trong bài viết này, chúng ta sẽ cùng khám phá những tính năng mới nổi bật trong React 19 và cách áp dụng chúng vào thực tế.

2. Những Điểm Nổi Bật Trong React 19

2.1 Hỗ Trợ Tính Năng Actions

Một trong những trường hợp sử dụng phổ biến nhất trong các ứng dụng React là thực hiện thay đổi dữ liệu và cập nhật trạng thái. Ví dụ, khi một người dùng gửi một biểu mẫu để cập nhật tên của họ, ứng dụng sẽ thực hiện một yêu cầu API và xử lý phản hồi. Trước đây, bạn cần phải quản lý các trạng thái như pending, error, success một cách thủ công. Để đơn giản hóa quá trình này, React 19 đã giới thiệu useTransition() để xử lý trạng thái isPending tự động:

// Sử dụng trạng thái pending từ Actions
function CậpNhậtTên({}) {
  const [tên, thiếtLậpTên] = useState("");
  const [lỗi, thiếtLậpLỗi] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const lỗi = await cậpNhậtTên(tên);
      if (lỗi) {
        thiếtLậpLỗi(lỗi);
        return;
      } 
      redirect("/đường-dẫn");
    })
  };

  return (
    <div>
      <input value={tên} onChange={(event) => thiếtLậpTên(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Cập Nhật
      </button>
      {lỗi && <p>{lỗi}</p>}
    </div>
  );
}

Như vậy, UI vẫn sẽ giữ được tính linh hoạt và khả năng tương tác trong khi dữ liệu đang được thay đổi.

2.2 Hook Mới: useActionState

React 19 đã giới thiệu một hook mới mang tên useActionState để đơn giản hóa việc xử lý các trường hợp phổ biến cho Actions:

const [lỗi, submitAction, isPending] = useActionState(
  async (trạngTháiTrước, tênMới) => {
    const lỗi = await cậpNhậtTên(tênMới);
    if (lỗi) {
      return lỗi;
    }
    return null;
  },
  null,
);

Hook này giúp bọc các Actions và trả về kết quả cuối cùng, mang lại một trải nghiệm lập trình dễ dàng hơn cho các nhà phát triển.

2.3 Tính Năng Actions Trên React DOM

Bên cạnh đó, React 19 còn cung cấp khả năng tích hợp form Actions trong react-dom để tự động xử lý việc gửi dữ liệu của các thành phần như form, input và button:

<form action={actionFunction}>

Khi Action form hoàn tất thành công, React sẽ tự động đặt lại form cho các thành phần không kiểm soát.

2.4 Hook Mới: useFormStatus

Để tối ưu hóa việc truy cập thông tin trạng thái của form, React 19 đã bổ sung useFormStatus:

import {useFormStatus} from 'react-dom';

function NútThiếtKế() {
  const {pending} = useFormStatus();
  return <button type="submit" disabled={pending} />
}

Hook này giúp các thành phần có thể truy cập trạng thái của form mà không cần truyền props xuống trong chuỗi thành phần.

2.5 Hook Mới: useOptimistic

Cuối cùng, React 19 còn mang đến hook useOptimistic giúp hiển thị trạng thái cuối cùng ngay cả khi yêu cầu async đang được thực hiện:

function ThayĐổiTên({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await cậpNhậtTên(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Tên của bạn là: {optimisticName}</p>
      <p>
        <label>Thay đổi tên:</label>
        <input type="text" name="name" disabled={currentName !== optimisticName} />
      </p>
    </form>
  );
}

Hook này cho phép hiển thị một cách tốt nhất trạng thái mà người dùng mong muốn một cách linh hoạt.

2.6 Cách Sử Dụng API Mới: use

Một trong những cải tiến đáng chú ý khác là API mới use, cho phép đọc tài nguyên chính xác trong quá trình render:

import {use} from 'react';

function BìnhLuận({commentsPromise}) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

API use sẽ tạm dừng cho đến khi promise được giải quyết, giúp dễ dàng quản lý tài nguyên trong quá trình render.

Còn tiếp... Hẹn gặp lại các bạn trong bài viết sau!

3. Tài Liệu Tham Khảo

React Official Blog
source: viblo