useState چیست؟ مدیریت حالت در React

وقتی با React شروع به کار می‌کنید،
در ابتدا کامپوننت‌ها بیشتر شبیه قالب‌های ثابت هستند.
آن‌ها اطلاعات را نمایش می‌دهند،
اما تغییر خاصی در آن‌ها اتفاق نمی‌افتد.

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

• کلیک روی دکمه
• تغییر مقدار فرم
• نمایش یا مخفی کردن عناصر

برای مدیریت این تغییرات در React
از مفهومی به نام State استفاده می‌شود.

و یکی از مهم‌ترین ابزارهای مدیریت State در React،
هوکی به نام useState است.

State در React چیست؟

State در React به داده‌هایی گفته می‌شود
که در طول زمان تغییر می‌کنند
و باعث به‌روزرسانی رابط کاربری می‌شوند.

برای مثال:

• تعداد لایک‌ها
• متن وارد شده در یک input
• باز یا بسته بودن یک منو

همه این موارد نمونه‌هایی از State هستند.

هوک useState چیست؟

useState یک هوک در React است
که به شما اجازه می‌دهد
در کامپوننت‌های تابعی State ایجاد و مدیریت کنید.

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

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

در اینجا:

• state مقدار فعلی داده است
• setState تابعی برای تغییر آن مقدار است
• initialValue مقدار اولیه state است

مثال ساده از useState

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

import { useState } from "react";

function Counter() {

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

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

هر بار که دکمه کلیک می‌شود،
مقدار count تغییر می‌کند
و React کامپوننت را دوباره رندر می‌کند.

چرا useState مهم است؟

بدون State،
کامپوننت‌ها نمی‌توانند
به تغییرات کاربر واکنش نشان دهند.

useState این امکان را فراهم می‌کند
که داده‌های متغیر را در داخل کامپوننت نگهداری کنیم
و رابط کاربری را بر اساس آن‌ها به‌روزرسانی کنیم.

به همین دلیل useState
یکی از پایه‌ای‌ترین ابزارها در React محسوب می‌شود.

جمع‌بندی

State یکی از مهم‌ترین مفاهیم در React است
که به کامپوننت‌ها اجازه می‌دهد
داده‌های متغیر را مدیریت کنند.

هوک useState
ابزاری ساده اما قدرتمند است
که به کمک آن می‌توان
کامپوننت‌های تعاملی و پویا ساخت.

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