هوک useState در React – آموزش مدیریت State در کامپوننت‌های تابعی

قبل از معرفی Hooks، مدیریت state فقط در کامپوننت‌های کلاسی ممکن بود. امروز با useState می‌توانید در ساده‌ترین کامپوننت‌های تابعی هم داده‌های پویا نگه دارید. هر بار که state تغییر کند، React کامپوننت را دوباره رندر می‌کند و UI به‌روز می‌شود.

useState چیست؟

useState یکی از پرکاربردترین Hookهای React است که یک مقدار state و یک تابع به‌روزرسان برمی‌گرداند:

const [value, setValue] = useState(مقدار_اولیه);

چرا به state نیاز داریم؟

Props داده را از والد دریافت می‌کنند، اما state داده‌ای است که خود کامپوننت مالک آن است — مثل تعداد کلیک‌ها، متن input یا گزینه انتخاب‌شده در dropdown. بدون state، رابط کاربری پویا و تعاملی نخواهد بود.

مثال ۱: شمارنده ساده

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>تعداد: {count}</h1>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

با هر کلیک، setCount مقدار جدید را ثبت می‌کند و React کامپوننت را مجدداً رندر می‌کند.

مثال ۲: کنترل select با state

import { useState } from "react";

export default function CitySelector() {
  const [city, setCity] = useState("تهران");

  function changeHandler(event) {
    setCity(event.target.value);
  }

  return (
    <div>
      <h1>شهر انتخاب‌شده: {city}</h1>
      <select onChange={changeHandler}>
        <option value="تهران">تهران</option>
        <option value="مشهد">مشهد</option>
        <option value="اصفهان">اصفهان</option>
      </select>
    </div>
  );
}

نکات مهم در کار با useState

۱. state را مستقیم تغییر ندهید

// ❌ اشتباه — React تغییر را تشخیص نمی‌دهد
count = count + 1;

// ✅ درست — همیشه از setCount استفاده کنید
setCount(count + 1);

۲. هر state مستقل است

برای چند مقدار جدا، چند بار useState فراخوانی کنید:

const [name, setName] = useState("");
const [age, setAge] = useState(0);

۳. مقدار اولیه می‌تواند هر نوع داده‌ای باشد

رشته، عدد، بولین، آرایه یا آبجکت — همه پشتیبانی می‌شوند:

const [items, setItems] = useState([]);
const [user, setUser] = useState({ name: "", email: "" });

تفاوت state با props

جمع‌بندی

useState پایه‌ی ساخت رابط‌های تعاملی در React است. با تعریف مقدار اولیه، خواندن state در JSX و به‌روزرسانی از طریق تابع setter، هر کامپوننت تابعی می‌تواند رفتار پویا داشته باشد. از شمارنده‌های ساده تا فرم‌های پیچیده، تقریباً هر سناریوی تعاملی با useState شروع می‌شود.