Khám phá Bản phát hành React 19

React 19 chính thức ra mắt vào ngày 25 tháng 4 năm 2024, mang đến những cải tiến đột phá trong trải nghiệm phát triển và hiệu năng ứng dụng. Dưới đây là những tính năng cốt lõi bạn cần biết.

Thành phần Máy chủ (Server Components)

Đây là thay đổi trọng tâm của React 19, cho phép render thành phần trực tiếp trên máy chủ:

• Tối ưu tốc độ tải trang: Giảm lượng JavaScript gửi xuống client bằng cách trả về kết quả đã render sẵn
• Chia sẻ logic đa nền tảng: Viết thành phần chạy được cả trên server và client
• Cải thiện SEO: HTML gửi đến client đã chứa đầy đủ nội dung

Ví dụ minh họa:

// DanhSachSanPham.server.jsx
export default async function DanhSachSanPham() {
  const response = await fetch("https://api.mysite.com/products");
  const sanPham = await response.json();

  return (
    <section>
      {sanPham.map(sp => (
        <article key={sp.ma}>
          <h3>{sp.ten}</h3>
          <p>Giá: {sp.gia.toLocaleString()} VND</p>
        </article>
      ))}
    </section>
  );
}

Chỉ thị Thực thi Mới

Hai chỉ thị quan trọng định hướng luồng thực thi:

• 'use client': Đánh dấu thành phần cần xử lý tương tác ở phía client
• 'use server': Xác định hàm chỉ chạy trên máy chủ (dành cho Server Actions)

Server Actions và Xử lý Form

Khái niệm Actions giúp đơn giản hóa thao tác với form và tương tác máy chủ:

// xuLyDonHang.js
'use server';
export async function taoDonHang(formData) {
  const sanPham = formData.get('san_pham');
  // Logic lưu vào database
}

"use client";
import { taoDonHang } from "./xuLyDonHang";

export default function FormDatHang() {
  return (
    <form action={taoDonHang}>
      <input name="san_pham" placeholder="Tên sản phẩm" />
      <button type="submit" disabled={isDangXuLy}>
        {isDangXuLy ? "Đang xử lý..." : "Đặt hàng"}
      </button>
    </form>
  );
}

useActionState - Quản lý Trạng thái Tác vụ

Hook hỗ trợ theo dõi trạng thái tác vụ và kết quả trả về:

const [loi, hanhDong, dangCho] = useActionState(
  async (_, tenMoi) => await capNhatTen(tenMoi),
  null
);

return (
  <form action={hanhDong}>
    <input name="ten" />
    <button disabled={dangCho}>
      {dangCho ? "Đang lưu..." : "Cập nhật"}
    </button>
    {loi && <div className="loi">{loi}</div>}
  </form>
);

useFormStatus - Truy cập Trạng thái Form

Giúp thành phần con đọc trạng thái form cha mà không cần prop drilling:

import { useFormStatus } from "react-dom";

function NutDangNhap() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>
    {pending ? "Đang gửi..." : "Gửi"}
  </button>;
}

useOptimistic - Giao diện Người dùng Tối ưu

Xử lý cập nhật giao diện trước khi tác vụ hoàn tất:

function ThayDoiTen({tenHienTai}) {
  const [tenTamThoi, capNhatTenTam] = useOptimistic(tenHienTai);

  const xuLyGui = async (formData) => {
    const tenMoi = formData.get("ten");
    capNhatTenTam(tenMoi);
    await capNhatTenThuc(tenMoi);
  };

  return (
    <form action={xuLyGui}>
      <p>Tên hiện tại: {tenTamThoi}</p>
      <input name="ten" disabled={tenTamThoi !== tenHienTai} />
    </form>
  );
}

use - API Đọc Tài nguyên

API thử nghiệm cho phép đọc trực tiếp giá trị từ Promise trong hàm render:

function BinhLuan({binhLuanPromise}) {
  const danhSach = use(binhLuanPromise);
  return danhSach.map(bl => (
    <div key={bl.id}>{bl.noiDung}</div>
  ));
}