کاربرد های usestate در reactچیه ؟

در React، useState یکی از هوک‌های اصلی است که برای مدیریت وضعیت (state) در کامپوننت‌های تابعی (functional components) استفاده می‌شود. این هوک به شما امکان می‌دهد که مقدار وضعیت یک کامپوننت را ذخیره و تغییر دهید، که در پی آن، رندر کامپوننت به‌روزرسانی می‌شود.

کاربردهای اصلی useState در React:

1. مدیریت وضعیت در کامپوننت‌ها:

شما می‌توانید وضعیت‌های مختلفی مانند ورودی‌های فرم، حالت‌های UI (مثل باز یا بسته بودن منو)، شمارنده‌ها و دیگر مقادیر متغیر را با useState مدیریت کنید.

مثال: یک شمارنده که با کلیک روی دکمه افزایش می‌یابد.

import { useState } from 'react';

function Counter() {

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

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increase</button>

    </div>

  );

}

2. مدیریت ورودی‌های فرم:

در فرم‌ها، شما می‌توانید مقادیر ورودی‌های مختلف مانند input، textarea و select را با استفاده از useState مدیریت کنید.

مثال: یک فرم ساده برای وارد کردن نام کاربر.

import { useState } from 'react';

function NameForm() {

  const [name, setName] = useState('');

  const handleChange = (event) => {

    setName(event.target.value);

  };

  return (

    <form>

      <input type="text" value={name} onChange={handleChange} />

      <p>Your name is: {name}</p>

    </form>

  );

}

3. مدیریت وضعیت منطقی (Boolean state):

شما می‌توانید از useState برای مدیریت وضعیت‌هایی که فقط دو حالت دارند (مثل true/false) استفاده کنید. این می‌تواند برای حالت‌های باز یا بسته، نمایش یا مخفی شدن استفاده شود.

مثال: یک دکمه برای باز یا بسته کردن یک منو.

import { useState } from 'react';

function ToggleMenu() {

  const [isOpen, setIsOpen] = useState(false);

  return (

    <div>

      <button onClick={() => setIsOpen(!isOpen)}>

        {isOpen ? 'Close Menu' : 'Open Menu'}

      </button>

      {isOpen && <p>The menu is open!</p>}

    </div>

  );

}

4. مدیریت آرایه‌ها و اشیاء:

useState همچنین می‌تواند برای مدیریت وضعیت‌هایی که شامل آرایه‌ها یا اشیاء پیچیده‌تر هستند، استفاده شود. در این حالت، برای تغییر وضعیت، باید وضعیت را به‌طور کامل جایگزین کنید یا از spread operator یا متدهای خاص برای تغییر استفاده کنید.

مثال: مدیریت یک آرایه از آیتم‌ها.

import { useState } from 'react';

function TodoList() {

  const [todos, setTodos] = useState([]);

  const addTodo = (newTodo) => {

    setTodos([...todos, newTodo]);

  };

  return (

    <div>

      <button onClick={() => addTodo('New Task')}>Add Todo</button>

      <ul>

        {todos.map((todo, index) => (

          <li key={index}>{todo}</li>

        ))}

      </ul>

    </div>

  );

}

5. مدیریت وضعیت کامپوننت‌های پیچیده (Object/Array State):

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

مثال: مدیریت وضعیت یک شی که حاوی نام و سن کاربر است.

import { useState } from 'react';

function UserProfile() {

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

  const updateUser = (key, value) => {

    setUser((prevState) => ({

      ...prevState,

      [key]: value,

    }));

  };

  return (

    <div>

      <input

        type="text"

        value={user.name}

        onChange={(e) => updateUser('name', e.target.value)}

      />

      <input

        type="number"

        value={user.age}

        onChange={(e) => updateUser('age', e.target.value)}

      />

      <p>{user.name} is {user.age} years old.</p>

    </div>

  );

}

نتیجه‌گیری:

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