1.use()

Trong phiên bản React 19 sẽ giới thiệu một hook mới gọi là use(). Đây là hook giúp chúng ta có thể đơn giản hoá việc sử dụng promises, async code, và context.

Dưới đây là cách sử dụng hook để thực hiện việc gọi api:

const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
  };
  
  const UsersItems = () => {
    const users = use(fetchUsers());
  
    return (
      <ul>
        {users.map((user) => (
          <div key={user.id}>
            <h2 className='text-xl font-bold'>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        ))}
      </ul>
    );
  }; 
export default UsersItems;

Ngoài ra bạn còn có thể sử dụng hook mới này với Context. API Context là một cách phổ biến để quản lý trạng thái toàn cục trong React mà không cần sử dụng bất kỳ thư viện quản lý trạng thái nào. Với hook use, hook context sẽ trông như mã sau:

import { createContext, useState, use } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const Card = () => {
  // use Hook()
  const { theme, toggleTheme } = use(ThemeContext);

  return (
    <div
      className={`p-4 rounded-md ${
        theme === 'light' ? 'bg-white' : 'bg-gray-800'
      }`}
    >
      <h1
        className={`my-4 text-xl ${
          theme === 'light' ? 'text-gray-800' : 'text-white'
        }`}
      >
        Theme Card
      </h1>
      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
       Hello!! use() hook
      </p>
      <button
        onClick={toggleTheme}
        className='bg-blue-500 hover:bg-blue-600 text-white rounded-md'
      >
        {theme === 'light' ? 'Switch Dark Mode' : 'Switch Light Mode'}
      </button>
    </div>
  );
};

const Theme = () => {
  return (
    <ThemeProvider>
      <Card />
    </ThemeProvider>
  );
};

export default Theme

2.useFormStatus()

Hook mới này trong React 19 này sẽ giúp bạn có nhiều kiểm soát hơn đối với các biểu mẫu bạn tạo ra. Nó sẽ cung cấp thông tin trạng thái về việc nộp biểu mẫu cuối cùng.

const { pending, data, method, action } = useFormStatus();

• Pending: Một giá trị boolean. Nếu true, điều này có nghĩa là biểu mẫu cha <form> đang chờ xử lý gửi. Nếu không, false.
• Data: Một đối tượng thực hiện FormData interface chứa dữ liệu mà biểu mẫu cha <form> đang gửi. Nếu không có hoạt động gửi nào hoặc không có biểu mẫu cha <form>, nó sẽ là null.
• Method: Một giá trị chuỗi là ‘get’ hoặc ‘post’. Điều này thể hiện rằng biểu mẫu cha <form> đang gửi với phương thức HTTP GET hoặc POST. Mặc định, một <form> sẽ sử dụng phương thức GET và có thể được chỉ định bởi thuộc tính method.
• Action: Một tham chiếu đến hàm được truyền cho thuộc tính action trên biểu mẫu cha <form>. Nếu không có biểu mẫu cha <form>, thuộc tính này là null. Nếu có một giá trị URI được cung cấp cho thuộc tính action, hoặc không có thuộc tính action được chỉ định, action sẽ là null.

Dưới đây là ví dụ:

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

3.useActionState()

useActionState() là hook cho phép bạn cập nhật trạng thái dựa trên kết quả form action.

const [state, formAction] = useActionState(fn, initialState, permalink?);

Parameters

• fn: Là hàm sẽ được gọi khi form được submit hoặc nhấn button.
• initialState: Đây là giá trị ban đầu, nó có thể là bất kì giá trị tuần tự nào và đối số này sẽ được bỏ qua sau khi hành động được gọi lần đầu tiên.
• permalink(optional): Là một URL hoặc liên kết trang, nếu fn được chạy trên server thì trang sẽ được chuyển hướng đến permalink.

Returns

• state: Là trạng thái hiện tại. Trong lần đầu tiên render thì nó sẽ là initialState. Sau khi action được gọi thì nó sẽ là giá trị được trả về bởi action đó.
• formAction: một hành động sẽ được truyền cho thuộc tính action của biểu mẫu. Giá trị trả về của hành động này sẽ có sẵn trong trạng thái.

Dưới đây là ví dụ về cách sử dụng hook:

import { useFormState} from 'react-dom';

const FormState = () => {
    const submitForm = (prevState, queryData) => {
        const name =  queryData.get("username");
        console.log(prevState); // previous form state
        if(name === 'john'){
            return {
                success: true,
                text: "Welcome"
            }
        }
        else{
            return {
                success: false,
                text: "Error"
            }
        }
    }
    const [ message, formAction ] = useFormState(submitForm, null)
    return <form action={formAction}>
        <label>Name</label>
        <input type="text" name="username" />
        <button>Submit</button>
        {message && <h1>{message.text}</h1>}
    </form>
}

export default FormState;

4.useOptimistic()