هوک useState (useState)

هوک useState در ری اکت ساده ترین راه مدیریت وضعیت (State) است. با این هوک می توانی در کامپوننت تابعی، داده های متغیر مثل رنگ، تعداد، یا متن را نگه داری و هر وقت لازم شد آن ها را عوض کنی.

هوک useState در ری اکت چیست؟

وضعیت یا State یعنی داده زنده برنامه که تغییر می کند. مثلا رنگ انتخابی کاربر، مقدار یک شمارنده، یا وضعیت «ورود کاربر».

هوک useState یک تابع است که به کامپوننت تابعی توانایی نگه داشتن این وضعیت را می دهد. هر بار state عوض شود، کامپوننت دوباره رندر می شود و صفحه به روز می ماند.

کار useState این است که یک مقدار اولیه بگیرد و دو چیز برگرداند: مقدار فعلی state و تابعی برای عوض کردن آن.

ایمپورت کردن هوک useState در ری اکت

برای استفاده از هوک useState در ری اکت باید آن را از بسته react ایمپورت کنی. ایمپورت (Import) یعنی «این تابع را از آن فایل بیاور داخل این فایل».

import { useState } from "react";

مشاهده در ادیتور

این نوع نوشتن به نام ساختاردهی یا Destructuring شناخته می شود. یعنی از بین خروجی های مختلف، فقط useState را جدا و وارد می کنیم.

مقداردهی اولیه هوک useState

برای شروع باید داخل بدنه کامپوننت تابعی، useState را صدا بزنی. آرگومان آن مقدار اولیه است؛ مثلا "red" برای رنگ.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("red");
}

مشاهده در ادیتور

color مقدار فعلی state است. setColor تابعی است که رنگ را عوض می کند. اسم ها اختیاری هستند؛ اما بهتر است معنی دار باشند تا کد خوانا بماند.

خواندن state در JSX

حالا state را داخل JSX نشان می دهیم. JSX همان کد شبیه HTML است که ری اکت آن را به جاوااسکریپت تبدیل می کند.

import { useState } from "react";
import { createRoot } from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <h1>
      My favorite color is {color}!
    </h1>
  );
}

createRoot(document.getElementById("root")).render(
  <FavoriteColor />
);

مشاهده در ادیتور

در متن h1، مقدار color بین آکولاد قرار گرفته است. هر وقت state عوض شود، متن هم خودکار به روز می شود.

به روزرسانی state با دکمه

برای تغییر state باید از تابع ست کننده استفاده کنیم؛ اینجا setColor. روی رویداد کلیک دکمه، setColor را با مقدار جدید صدا می زنیم.

<button
  type="button"
  onClick={() => {
    setColor("blue");
  }}
>
  Blue
</button>

مشاهده در ادیتور

هشدار: هرگز state را مستقیم عوض نکن. مثلا color = "blue" اشتباه است. همیشه از تابع setColor استفاده کن تا ری اکت بفهمد باید دوباره رندر کند.

حالا نسخه کامل FavoriteColor با یک دکمه برای تغییر رنگ را ببینیم.

import { useState } from "react";
import { createRoot } from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>
        My favorite color is {color}!
      </h1>
      <button
        type="button"
        onClick={() => {
          setColor("blue");
        }}
      >
        Blue
      </button>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <FavoriteColor />
);

مشاهده در ادیتور

گام های تمرین با useState

1. یک پروژه ساده ری اکت بساز و App را خالی کن.
2. useState و createRoot را در بالای فایل ایمپورت کن.
3. کامپوننت FavoriteColor را تعریف کن و state رنگ را تنظیم کن.
4. رنگ را در یک h1 نمایش بده.
5. یک دکمه اضافه کن و در onClick، setColor را صدا بزن.

هوک useState چه چیزهایی را نگه می دارد؟

هوک useState می تواند هر نوع داده را نگه دارد. رشته، عدد، بولین، آرایه یا آبجکت؛ حتی ترکیب این ها.

می توانیم چند useState جدا بسازیم و هر کدام را برای یک مقدار استفاده کنیم. مثال زیر برای اطلاعات یک ماشین است.

import { useState } from "react";
import { createRoot } from "react-dom/client";

function MyCar() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>
        My {brand}
      </h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <MyCar />
);

مشاهده در ادیتور

گاهی دوست داریم همه این ویژگی ها در یک state واحد باشند. در این حالت یک آبجکت می سازیم و همان را در useState قرار می دهیم.

import { useState } from "react";
import { createRoot } from "react-dom/client";

function MyCar() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red",
  });

  return (
    <>
      <h1>
        My {car.brand}
      </h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <MyCar />
);

مشاهده در ادیتور

نکته: وقتی از آبجکت استفاده می کنی باید برای دسترسی، از نقطه استفاده کنی؛ مثلا car.brand یا car.color.

به روزرسانی آبجکت در state با Spread

وقتی state یک آبجکت است، setCar کل آن آبجکت را جایگزین می کند. اگر فقط رنگ را بفرستی، بقیه فیلدها حذف می شوند.

برای حل این مشکل از عملگر Spread استفاده می کنیم. این عملگر ... است و تمام ویژگی های آبجکت قبلی را کپی می کند.

const updateColor = () => {
  setCar((previousState) => {
    return {
      ...previousState,
      color: "blue",
    };
  });
};

مشاهده در ادیتور

اینجا previousState همان car قبلی است. با ...previousState همه ویژگی ها را کپی می کنیم و در همان لحظه color را روی "blue" می گذاریم.

اگر می خواهی بیشتر درباره هوکس بدانی، دوباره به صفحه هوکس در ری اکت برگرد. همچنین می توانی بعد از این صفحه سراغ هوک useEffect در ری اکت بروی.

برای دسترسی سریع، صفحه useState در ری اکت را در مرورگر بوکمارک کن.

جمع بندی سریع

• هوک useState در ری اکت state را در کامپوننت تابعی نگه می دارد.
• useState دو چیز برمی گرداند؛ مقدار state و تابع تغییر آن.
• state را مستقیم عوض نکن؛ همیشه از تابع setter استفاده کن.
• می توانی چند useState جدا یا یک آبجکت مشترک داشته باشی.
• برای آبجکت ها و آرایه ها، هنگام به روزرسانی از عملگر Spread کمک بگیر.