Ninedev logo

useState là gì? Cách sử dụng useState trong React Hook

Tác giả: Nine Dev

useState là một trong những React Hook quan trọng nhất giúp quản lý state trong functional component. Bài viết này sẽ giúp bạn hiểu rõ cách sử dụng useState từ cơ bản đến nâng cao.

I. useState là gì?

useState là một Hook trong React cho phép bạn tạo và quản lý state trong functional component.

Trước đây, state chỉ tồn tại trong class component. Nhưng từ React 16.8, Hooks ra đời giúp bạn sử dụng state trong function component dễ dàng hơn.

II. Cách sử dụng useState

useState nhận một giá trị khởi tạo và trả về:

  • Giá trị state hiện tại
  • Hàm cập nhật state

import React, { useState } from "react";

const Test = () => {
  const [message, setMessage] = useState("");

  return <p>{message}</p>
}

III. Cập nhật state

Để cập nhật state, bạn sử dụng hàm setter:


const [message, setMessage] = useState("Initialize");

const updateMessage = () => {
  setMessage("Clicked");
}

Lưu ý: useState hoạt động bất đồng bộ nên giá trị không cập nhật ngay lập tức.

IV. Tối ưu hiệu suất

Trong một số trường hợp, bạn nên truyền vào useState một function thay vì giá trị trực tiếp: 


const [state, setState] = useState(() => initialValue);

Điều này giúp tối ưu hiệu suất khi giá trị khởi tạo phức tạp.

V. Tổng kết

  • useState giúp quản lý state trong function component
  • Dễ sử dụng và code gọn hơn class component
  • Có thể tối ưu bằng lazy initialization