> For the complete documentation index, see [llms.txt](https://haonm.gitbook.io/react-the-complete-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://haonm.gitbook.io/react-the-complete-guide/understanding-the-base-features-and-syntax/using-the-usestate-hook-for-state-manipulation.md).

# Sử dụng useState() Hook cho xử lý State

**Khởi tạo State**

`useState` cho phép chúng ta khai báo local state trong Function Component cách mà trước để chỉ dùng cho Class Component.

```
const [state, setState] = useState(initStateValue)
```

> * state: định nghĩa tên của state nó có thể là đơn giá trị hoặc object,.. (là tham số của useState)
> * setState: định nghĩa tên function dùng cho việc update state (là tham số của useState)
> * initialStateValue: là giá trị ban đầu của state. Ví dụ:

```
const Project=() => {
  const [count, setCount] = useState(0)
  const handleClick = () => setCount(age + 1)

  return (
    <div>
      Current count {count}.
      <div>
        <button onClick={handleClick}>Increment Count!</button>
      </div>
    </div>
  )
}
```

* Như ví dụ thì bạn thấy ban đầu bạn khởi tạo state có tên là `count` với giá trị ban đầu là `0`. Thì `count` ở đây là state name và là tham số đầu tiên của hàm `useState` và tham số thứ 2 sẽ hàm function `setCount` hàm xử lý khi mỗi lần ta nhấn click thì giá trị của state sẽ được tăng lên một. Công việc xử lý tăng lên 1 nó tương đương với hàm `setState` trong Class Components.
* Vậy đó là cách khai báo cũng như cách update một state trong Function Component vậy nếu 1 Function Component có nhiều state thì sao?

#### Khai bao nhiều state cho Function Components <a href="#khai-bao-nhieu-state-cho-function-components-2" id="khai-bao-nhieu-state-cho-function-components-2"></a>

* Thực ra khá đơn giản ta chỉ cần thêm N hàm useSate thôi.

```
const [state1, setState1] = useState(initialStateValue1)
const [state2, setState2] = useState(initialStateValue2)
```