Những điểm mới trong React 19

Tổng quan

React 19 đã ra mắt với nhiều cải tiến mới, ngoài việc cải thiện hiệu suất, xoá bỏ các hạn chế, loại bỏ các API không cần thiết, React 19 còn giới thiệu một số tính năng mới giúp cho việc phát triển ứng dụng React trở nên dễ dàng hơn.

Các điểm mới trong React 19

1. Actions

Actions là một khái niệm mới trong React 19, nó giúp chúng ta quản lý các hành động của người dùng một cách dễ dàng hơn. Với Actions, chúng ta có thể xử lý các sự kiện của người dùng một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

Actions có thể được sử dụng trên cả client và server. Ví dụ, quý vị có thể có Actions client thay thế cách sử dụng trước đó onSubmit cho một biểu mẫu.

jsx

import { useState } from "react";

export default function Demo() {
  async function formAction(formData) {
    const newItem = formData.get("item");   
    await fetch("/api/add-item", {
      method: "POST",
      body: JSON.stringify({ item: newItem }),
    });
  }

  return (
    <>
      <form action={formAction}>
        <input type="text" name="item" placeholder="" />
        <button type="submit">Add</button>
      </form>
    </>
  );
}

Sử dụng Actions phía server như sau:

Tại client:

jsx

"use client";

import { create } from "./actions";

export default function TodoList() {
  return (
    <>
      <h1>Todo List</h1>
      <form action={create}>
        <input type="text" name="item" placeholder="Add todo..." />
        <button type="submit">Add</button>
      </form>
    </>
  );
}

Tại server:

jsx

"use server";

export async function create() {
    await db.insert({ item: request.body.item });
}

2. useActionState

useActionState là một hook mới trong React 19, nó giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn. useActionState giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

jsx

import { useActionState } from "react";

export default function Demo() {
  const [item, setItem] = useActionState("item", "");

  return (
    <>
      <input type="text" name="item" value={item} onChange={setItem} />
    </>
  );
}

3. useFormStatus

useFormStatus là một hook mới trong React 19, nó giúp chúng ta quản lý trạng thái của biểu mẫu một cách dễ dàng hơn. useFormStatus giúp chúng ta quản lý trạng thái của biểu mẫu một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

jsx

import { useFormStatus } from "react";

export default function Demo() {
    const status = useFormStatus();

    return (
       <form action={action}>
            <input type="text" name="item" placeholder="" />
            <button type="submit" disabled={status.pending}>Add</button>
        </form>
    );
}

4. preload

preload là một hàm mới trong React 19, nó giúp chúng ta tải trước dữ liệu cần thiết cho trang web một cách dễ dàng hơn. preload giúp chúng ta tải trước dữ liệu cần thiết cho trang web một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

jsx

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";

function MyComponent() {
  preinit("https://.../path/to/some/script.js", { as: "script" });
  preload("https://.../path/to/some/font.woff", { as: "font" });
  preload("https://.../path/to/some/stylesheet.css", { as: "style" });
  prefetchDNS("https://...");
  preconnect("https://...");
}

html

<html>
  <head>
    <link rel="prefetch-dns" href="https://..." />
    <link rel="preconnect" href="https://..." />
    <link rel="preload" as="font" href="https://.../path/to/some/font.woff" />
    <link
      rel="preload"
      as="style"
      href="https://.../path/to/some/stylesheet.css"
    />
    <script async="" src="https://.../path/to/some/script.js"></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

5. Suspense

Suspense là một khái niệm mới trong React 19, nó giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn. Suspense giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

jsx

import { Suspense } from "react";

export default function Demo() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

6. useTransition

useTransition là một hook mới trong React 19, nó giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn. useTransition giúp chúng ta quản lý trạng thái của ứng dụng một cách dễ dàng hơn, giúp chúng ta tách biệt logic xử lý ra khỏi giao diện người dùng.

jsx

import { useTransition } from "react";

export default function Demo() {
  const [startTransition, isPending] = useTransition();

  return (
    <>
      <button onClick={() => startTransition(() => alert("Hello!"))}>
        Say Hello
      </button>
      {isPending ? <div>Loading...</div> : null}
    </>
  );
}

Kết luận

Với những điểm mới trong React 19, chúng ta có thể phát triển ứng dụng React một cách nhanh chóng và hiệu quả hơn.

Tổng quan ​

Các điểm mới trong React 19 ​

1. Actions ​

2. useActionState ​

3. useFormStatus ​

4. preload ​

5. Suspense ​

6. useTransition ​

Kết luận ​

Nguyen Pham