هوک useState در ری اکت (react js)

امضای تابع و پارامترها

ساختار کلی استفاده از useState به شکل زیر است:

const [state, setState] = useState(initialValue);
      

• initialValue — مقدار اولیهٔ state در هنگام اولین رندر کامپوننت.
• state — مقدار فعلی state که در هر رندر نمایش داده می‌شود.
• setState — تابعی برای تغییر مقدار state و به‌روزرسانی رابط کاربری.

اگر می‌خواهید مقدار اولیه را بر اساس محاسبه‌ای سنگین تنظیم کنید، می‌توانید یک تابع به useState بدهید تا فقط یک بار در اولین رندر اجرا شود.

مثال ساده (Counter)

در مثال زیر از useState برای ساخت یک شمارنده ساده استفاده شده است:

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
      <button onClick={() => setCount(0)}>ریست</button>
    </div>
  );
}
      

با هر بار کلیک، مقدار count افزایش یافته و به‌صورت خودکار در رابط کاربری نمایش داده می‌شود.

مثال واقعی: مدیریت ورودی فرم

یکی از پرکاربردترین موارد استفاده از useState، مدیریت داده‌های ورودی کاربر در فرم‌هاست:

import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        placeholder="ایمیل" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password" 
        placeholder="رمز عبور" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button type="submit">ورود</button>
    </form>
  );
}
      

این روش در برنامه‌های واقعی برای احراز هویت یا ثبت داده‌ها در فرم‌ها بسیار رایج است. برای مدیریت فرم‌های async می‌توانید از useActionState استفاده کنید.

نکات مهم و خطاهای رایج

1. به‌روزرسانی async: تغییر state در React به‌صورت غیرهم‌زمان انجام می‌شود؛ بنابراین بلافاصله بعد از فراخوانی setState مقدار جدید در دسترس نیست.
2. وابستگی به مقدار قبلی: وقتی state به مقدار قبلی وابسته است، از فرم تابعی استفاده کنید:

   setCount(prev => prev + 1);

3. عدم تغییر مستقیم state: هرگز state را مستقیماً تغییر ندهید (مثلاً count++)، چون باعث رندر مجدد نمی‌شود.

مزایا در یک نگاه

• کاهش پیچیدگی مدیریت state نسبت به کلاس کامپوننت‌ها.
• نوشتن کدهای خواناتر و کوتاه‌تر.
• امکان استفادهٔ چندباره از منطق state در چند کامپوننت مختلف.

سوالات متداول

آیا می‌توان چند useState در یک کامپوننت داشت؟

بله، می‌توانید برای هر دادهٔ مجزا یک useState داشته باشید.

آیا useState باعث رندر مجدد می‌شود؟

بله، وقتی مقدار state تغییر کند، کامپوننت مجدداً رندر می‌شود.

چه تفاوتی با useReducer دارد؟

useReducer برای state‌های پیچیده‌تر و وابسته به منطق چندمرحله‌ای مناسب است.

منابع رسمی؟

React Docs: useState

جمع‌بندی

هوک useState یکی از ساده‌ترین اما قدرتمندترین ابزارهای React است که مدیریت state را در کامپوننت‌های تابعی ممکن می‌کند. با استفاده از این هوک می‌توانید رفتارهای پویا و تعاملی در رابط کاربری خود ایجاد کنید.

برای یادگیری بیشتر دربارهٔ state و اکشن‌ها، useActionState و useTransition را نیز مطالعه کنید.