useState เป็น Hook ที่ใช้ในการเพิ่ม state ให้กับ functional component โดยมันจะรับค่าเริ่มต้นเป็น argument และ return array ที่มีสอง element คือ ค่า state ปัจจุบัน และ function ในการอัพเดทค่า state
ตัวอย่างการใช้ useState ในการเพิ่ม counter ให้กับ functional component
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>decrement</button>
</div>
);
}
ในตัวอย่างนี้เราจะเริ่มต้นด้วยค่า count เป็น 0 และอัพเดทค่าทุกครั้งที่มีการคลิกปุ่ม Increment
และ decrement