---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# useState

## useState ใช้ทำอะไร ?

ใช้ประกาศตัวแปร state ให้กับ function component โดยใน 1 component จะประกาศกี่ครั้งก็ได้

{% hint style="info" %}
ค่าของตัวแปร state จะถูกเก็บไว้กับ React
{% endhint %}

{% hint style="warning" %}
**ข้อกำหนดในการใช้งาน**

* ต้องเรียกใช้ภายใน function component เท่านั้น
* ต้องเรียกใช้อยู่ด้านบนสุดของ function component
* ต้องมีลำดับการเรียกที่เหมือนเดิมทุก ๆ render (ไม่เรียกใช้ใน condition หรือ loop)
{% endhint %}

## **ค่าที่ useState รับได้**

* `[ไม่ใส่ก็ได้]` ค่าเริ่มต้นของตัวแปร state (ถ้าไม่กำหนดจะมีค่าเริ่มต้นเป็น undefined)

## **ค่าที่ useState จะ return**

* array ที่มีสมาชิก 2 ตัว คือ
  * ค่าปัจจุบันของตัวแปร state
  * function ที่ใช้เปลี่ยนแปลงตัวแปร state

## useState ทำงานยังไง ?

* **เมื่อ component render ครั้งแรก :** useState จะประกาศตัวแปร state และ return เป็น array ที่มีสมาชิกเป็นค่าเริ่มต้นที่เราส่งไป พร้อมกับ function ที่ใช้เปลี่ยนแปลงตัวแปร state
* **render ครั้งต่อ ๆ ไป :** useState จะ return เป็น array ที่มีสมาชิกเป็นค่าปัจจุบันของตัวแปร state (ที่ React เก็บไว้ให้) พร้อมกับ function ที่ใช้เปลี่ยนแปลงตัวแปร state

## ตัวอย่างการใช้งาน

```jsx
import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return  (
    <div>
      You have {count} cookies
      <br />
      <button onClick={() => setCount(count + 1)}>
        Steal a cookie
      </button>
    </div>
  )
}

```

```jsx
...
    const [count, setCount] = useState(0);
...
```

จากตัวอย่าง เราประกาศตัวแปร state ชื่อ `count` มีค่าเริ่มต้นเป็น `0` และใช้ [array destructuring](../../../javascript/destructuring#array-destructuring) เพื่อหยิบค่าออกมาจาก array ที่ useState return มาให้เรา

```jsx
...
  return  (
    <div>
      You have {count} cookies
      <br />
      <button onClick={() => setCount(count + 1)}>
        Steal a cookie
      </button>
    </div>
  )
…

```

จากนั้นเรานำ `count` มาแสดงผล และมี button ที่เมื่อคลิกแล้ว จะเพิ่มค่า `count` ด้วย 1 ผ่านการเรียกใช้ `setCount`

{% hint style="info" %}
การเปลี่ยนแปลงค่าตัวแปร state จะทำให้ component เกิดการ [re-render](../../rendering#re-rendering) เพื่อนำ state ล่าสุดไปใช้
{% endhint %}

## แหล่งอ้างอิง

{% embed url="https://reactjs.org/docs/hooks-state.html" %}

{% embed url="https://reactjs.org/docs/hooks-overview.html#state-hook" %}

