React hook: useState แบบสั้นๆ

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