راهنمای جامع useState در React

مفاهیم پایه useState

تعریف و معرفی اولیه

useState یک هوک است که به شما اجازه می‌دهد تا state محلی را در یک کامپوننت تابعی اضافه کنید. در React کلاسی، state توسط this.state و this.setState مدیریت می‌شود، اما در کامپوننت‌های تابعی، useState این قابلیت را فراهم می‌آورد.

const [value, setValue] = useState(initialValue);

• value نمایانگر state فعلی است.
• setValue یک تابع برای به‌روزرسانی value است.
• initialValue مقدار اولیه‌ی value است.

چرا useState مهم است؟

استفاده از useState به ما امکان می‌دهد تا کامپوننت‌هایی با توانایی پاسخگویی و تعاملی بسازیم. این هوک به شما کمک می‌کند تا داده‌های کاربر را ذخیره و به‌روزرسانی کنید، و وضعیت نمایشی کامپوننت را مدیریت نمایید.

پیشرفته: بهینه‌سازی و استفاده عمیق‌تر

مدیریت پیچیده‌تر State

گاهی اوقات state‌ای که مدیریت می‌کنیم پیچیده‌تر از یک مقدار ساده است. در این حالت، ممکن است نیاز به استفاده از چندین useState یا استفاده از یک شیء بزرگتر به عنوان state داشته باشیم.

const [user, setUser] = useState({ name: '', age: 0 });

نکات کلیدی برای بهینه‌سازی

• کمترین تعداد رندر: مطمئن شوید که setValue را فقط زمانی فراخوانی می‌کنید که واقعاً نیاز به تغییر state دارید.
• اجتناب از ایجاد توابع داخل render: برای جلوگیری از ایجاد توابع جدید در هر رندر، از useCallback استفاده کنید.

کاربرد‌های عملی و مثال‌ها

در این بخش، به بررسی چند مثال عملی از چگونگی استفاده از useState در سناریوهای مختلف می‌پردازیم. این مثال‌ها به شما کمک می‌کنند تا درک بهتری از قدرت و انعطاف‌پذیری این هوک به دست آورید.

مثال 1: فرم ورود

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // login user
    console.log(username)
    console.log(password)

  };

  return (
    <form onSubmit={handleLogin}>
      <input
        type="text"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <button type="submit">login</button>
    </form>
  );
}

مثال 2: تعقیب کننده‌ی تعداد کلیک‌ها

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

  return (
    <div>
      <p>click count: {count}</p>
      <button onClick={() => setCount(count + 1)}>click me!</button>
    </div>
  );
}

جمع‌بندی

useState یک ابزار قدرتمند در کیت ابزار React است که به شما اجازه می‌دهد تا با سهولت در کامپوننت‌های تابعی‌تان state را مدیریت کنید. امیدوارم این مقاله به شما کمک کرده باشد تا درک بهتری از چگونگی استفاده و بهینه‌سازی useState در پروژه‌هایتان داشته باشید. Happy coding!