useState() trong React là gì?

useState() là một Hook trong React cho phép bạn thêm trạng thái (state) React vào trong functional components. Trước khi Hooks được giới thiệu trong React 16.8, trạng thái chỉ có thể được sử dụng trong class components. useState() cung cấp một cách để lưu trữ và quản lý dữ liệu địa phương trong một component mà không cần chuyển đổi nó thành một class component.

Cách Sử Dụng useState()

useState() nhận một giá trị khởi tạo và trả về một mảng với hai phần tử: giá trị hiện tại của trạng thái và một hàm để cập nhật trạng thái đó. Bạn có thể sử dụng giá trị này trong component của mình và gọi hàm cập nhật khi bạn muốn thay đổi trạng thái.

Ví dụ:

import React, { useState } from 'react';

function Counter() {
  // Khai báo một biến trạng thái mới, gọi là "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Bạn đã click {count} lần</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Trong ví dụ trên, useState(0) khởi tạo trạng thái với giá trị ban đầu là 0. Biến count được sử dụng để hiển thị giá trị hiện tại của trạng thái, và hàm setCount được sử dụng để cập nhật giá trị của count.

Lưu Ý Khi Sử Dụng useState()

• Hàm cập nhật trạng thái (setCount trong ví dụ trên) không tự động gộp hoặc kết hợp các cập nhật. Để cập nhật trạng thái dựa trên giá trị hiện tại, bạn nên sử dụng một hàm nhận giá trị hiện tại của trạng thái và trả về giá trị mới.
• useState() không tự động gộp các cập nhật trạng thái như this.setState trong class components. Mỗi lần gọi useState() tạo ra một trạng thái và hàm cập nhật riêng biệt cho trạng thái đó.
• Bạn có thể sử dụng nhiều hook useState() trong một component để quản lý nhiều biến trạng thái.

useState() là một phần cơ bản của việc sử dụng Hooks trong React, giúp việc quản lý trạng thái trong functional components trở nên dễ dàng và linh hoạt hơn.