useState ری‌ اکت

State (یا وضعیت) داده‌ای است که مستقیماً درون یک کامپوننت نگهداری می‌شود و می‌تواند در طول زمان تغییر کند.

برای نمونه، موارد زیر می‌توانند با state مدیریت شوند:

• تعداد دفعات کلیک روی یک دکمه
• متنی که کاربر در یک input تایپ کرده

زمانی که مقدار state تغییر کند، ری اکت به‌صورت خودکار کامپوننت را دوباره رندر (به‌روزرسانی) می‌کند تا تغییرات در رابط کاربری نمایش داده شود. بدون نیاز به رفرش دستی یا مداخله مستقیم. (مشابه آن را در اجرای پروژه با Vite مشاهده کردید)

هوک useState به شما این امکان را می‌دهد که در کامپوننت‌های تابعی، وضعیت تعریف کنید. این هوک یک آرایه شامل دو مقدار بازمی‌گرداند:

1. مقدار فعلی وضعیت (مانند یک عدد یا رشته)
2. تابعی برای به‌روزرسانی مقدار وضعیت.

import React, { useState } from 'react';

function Counter() {
  // تعریف state با useState
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Clicked: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click Here
      </button>
    </div>
  );
}

export default Counter;

count: مقدار فعلی وضعیت.

setCount: تابع برای تغییر وضعیت.

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

state فقط مخصوص اعداد نیست! می‌توانید از آن برای نگهداری انواع مختلف داده مانند رشته‌ها، مقادیر بولی، شیء یا آرایه نیز استفاده کنید. در ادامه، چند نمونه از این کاربردها را با هم بررسی می‌کنیم:

• عدد (number):

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

  return (
    <div>
      <p>Clicked: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click Here
      </button>
    </div>
  );
}

• رشته (string):

function Name() {
  const [name, setName] = useState("World");
  return (
    <div>
      <p>Hello {name}!</p>
      <button onClick={() => setName("PNLdev")}>Switch</button>
    </div>
  );
}

• بولین (boolean):

import { useState } from 'react';

function Toggle() {
  const [isVisible, setIsVisible] = useState(true);

  return <div>
    <button onClick={() => setIsVisible(!isVisible)}>
      تغییر وضعیت
    </button>
    {isVisible && <p>این متن دیده می‌شود</p>}
  </div>;
}

• شیء (object):

function User() {
  const [user, setUser] = useState({ name: "Nima", age: 19 });
  return (
    <div>
      <p>name: {user.name}</p>
      <p>age: {user.age}</p>
    </div>
  );
}

• آرایه (array):

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState(["Reading", "Studying", "Coding"]);

  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>{task}</li>
      ))}
    </ul>
  );
}