هوک useState یکی از معروف‌ترین هوک‌های React است و این امکان را به ما می‌دهد تا یک متغیر state را به کامپوننت خود اضافه کنیم. هوک useState می‌تواند به راحتی رشته‌ها، آرایه‌ها، اعداد، آبجکت‌ها و موارد دیگر را در خود نگه دارد.

در این مقاله قصد داریم با هوک useState آشنا شویم و کاربرد آن را با سه مثال مختلف بررسی نماییم که این سه مثال عبارتند از: یک دکمه با رندر شرطی، مدیریت فرم و مثال شمارنده.

برای شروع کار، هنگامی که برنامه React خود را راه‌اندازی و اجرا کردیم، آماده استفاده از هوک useState می‌باشیم. در ابتدا باید این هوک را به صورت زیر import کنیم:

import { UseState } from 'react';

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

هوک useState با مدیریت state در برنامه‌های ما کار می‌کند. این مقدار اولیه state را به عنوان آرگومان می‌گیرد. سپس مقدار دوم، state ما را تنظیم می‌کند، به همین دلیل است که همیشه به عنوان setState شروع می‌شود. اکنون بررسی می‌کنیم که این کار را چگونه انجام می‌دهد؟

const [state, setState] = useState(initial values goes here)

const [calories, setCalories] = useState(initial value of calories)

در مورد رندر اول، state اولیه را با استفاده از تابع set، برمی‌گرداند و در حین رندر مجدد به مقدار متفاوتی به‌روزرسانی می‌شود.

رندر شرطی با هوک useState

در این مثال می‌بینیم که چطور می‌توانیم بسته به دو شرط این که آیا کاربر وارد شده است یا خیر، state را به‌روزرسانی کنیم. همچنین مشاهده می‌کنیم که چرا state اولیه را روی false، به این معنی که کاربر وارد نشده است تنظیم کرده‌ایم.

ما می‌خواهیم یک دکمه ورود ایجاد کنیم که از هوک useState برای ارائه دو نتیجه متفاوت استفاده می‌کند.

یک دکمه برای ورود به برنامه است که متن آن از کاربر می‌خواهد وارد شود. دیگری دکمه‌ای است که پس از ورود کاربر به برنامه، امکان خروج از برنامه را به او می‌دهد.

import React from 'react'

const Signin = () => {
  return (
    <div>
        <div>
            <button type="button">Sign Out</button>
            <p>Welcome back, good to see you in here<p>
        </div>
        <div>
            <button type="button">Sign In</button>
            <p>Please Sign in</p>
        </div>
    </div>
  )
}

export default Signin;

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

import React, { useState } from 'react'

const Signin = () => {
    const [signedin, setSignedin] = useState(false)

    const handleSignin = () => {
        setSignedin(true)
    }

    const handleSignout = () => {
        setSignedin(false)
    }
  return (
         <div>
           { signedin ? ( 
        <div>
            <button type="button" onClick={handleSignout}>Sign Out</button>
            <p>Welcome back, good to see you in here</p>
        </div>) :
        
        (<div>
            <button type="button"onClick={handleSignin}>Sign In</button>
            <p>Please Sign in</p>
        </div>)
           }
        </div>
  )
}

export default Signin;

بررسی ساختار کد مثال

ابتدا یک متغیر با هوک useState ایجاد کردیم که signedin را روی false قرار می‌دهد. زیرا در بارگذاری اول، نمی‌خواهیم کاربر وارد برنامه شود. اما وقتی روی دکمه ورود کلیک کرد، می‌تواند وارد شود.

سپس متغیرهایی را ایجاد کردیم که به ترتیب ورود به برنامه، خروج از برنامه و تنظیم تابع set روی true و false، یعنی handleSignin و handleSignout را انجام می‌دهند. پس از آن، یک handler onClick ایجاد کردیم که با کلیک بر روی دکمه یک اکشن را راه‌اندازی می‌کند. این اکشن توسط عملگر شرطی (ternary) هدایت می‌شود.

بنابراین، اگر روی دکمه ورود کلیک کنیم، وارد برنامه شده و یک پیام خوشامدگویی دریافت می‌کنیم. هنگامی که روی دکمه خروج کلیک کنیم، با پیام please sign in از ما درخواست می‌شود تا دوباره عمل لاگین را انجام دهیم.

نحوه استفاده از هوک useState در برنامه React Counter

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

کاری که این شمارنده انجام می‌دهد این است که تعداد کلیک‌های ما را می‌شمارد. بنابراین، اگر روی دکمه به تعداد ۱۲ بار کلیک کنیم، شمارنده به ۱۲ به‌روزرسانی می‌شود. البته باید به این نکته توجه داشته باشیم که دکمه در هر کلیک به‌روزرسانی می‌گردد.

import React from 'react';


const Newcounter = () => {
    return (
        <div>
            <button type="button">You will see the count here</button>
        </div>
    )
}


export default Newcounter;

برای functionality شمارنده، ابتدا باید هوک useState را import کنیم سپس از آن مانند شکل زیر استفاده نماییم:

const [count, setCount] = useState(0)

سپس متغیر دیگری ایجاد می‌کنید که تعداد را از ۰ به ۱، ۲، ۳ افزایش می‌دهد.

const incrementCount = () => { setCount (count + 1) }

اکنون می‌توانیم از یک handler onClick مطابق شکل زیر استفاده کنیم و تعداد افزایش یافته را return نماییم:

import React, { useState } from 'react';


const Newcounter = () => {
    const [count, setCount] = useState(0)

    const incrementCount = () => {
        setCount(count + 1)
    
    }
    return (
        <div>
            <button type="button" onClick={incrementCount}>You clicked  
            {count} times</button>
        </div>
    )
}


export default Newcounter;

نحوه استفاده از هوک useState در یک فرم در React

فرم‌ها از هوک useState استفاده می‌کنند و به توسعه‌دهنده‌ها اجازه می‌دهند تا یک state خالی را تنظیم کنند که از تابع set برای رسیدگی به آنچه کاربر به‌عنوان ورودی خود تایپ می‌کند، استفاده می‌نماید.

در این مثال ما قصد داریم تا نام و ایمیل کاربران را از طریق یک فرم جمع‌آوری کرده و سپس اطلاعات را ارسال کنیم. به عنوان مثال:

import React from 'react'

const Theform
 = () => {
  return (
    <div>
        <form>
            <input type="text" placeholder="enter your name" required />
            <input type="email" placeholder="enter your email" required />
            <button type="submit">Submit</button>
        </form>

    </div>
  )
}

export default Theform;

ابتدا هوک useState را در فایل خود import کرده، سپس با استفاده از آن نام و ایمیل را null می‌کنیم. اکنون کاربر می‌تواند اطلاعات خود را وارد کند.

پس از آن، یک arrow function با نام handleSubmit، که البته می‌تواند هر اسم دیگری داشته باشد ایجاد می‌کنیم که متد preventDefault() را اجرا می‌نماید. نام کاربر و ایمیل او را با استفاده از console.log() در کنسول نمایش می‌دهیم تا بتوانیم این جزئیات را با استفاده از event handler onSubmit() دریافت نماییم.

بعد از آن، می‌توانیم از تابع set هم برای نام و هم برای ایمیل استفاده کنیم تا اگر تغییری در ورودی اتفاق افتاد بتوانیم آن را مدیریت نماییم و مقدار ورودی را که به عنوان user و email در هوک useState مقداردهی اولیه کرده بودیم، دریافت کنیم.

باید این موضوع را به یاد داشته باشیم که این هوک از تابعset برای رندر مجدد استفاده می‌کند. به این ترتیب، هنگامی که کاربر مقادیر جدید را در فرم وارد می‌کند، ما آن را دوباره رندر می‌نماییم. به همین دلیل است که در ورودی خود value را به عنوان value={user} تنظیم می‌کنیم.

import React, { useState }from 'react'

const Theform
 = () => {

  const [user, setUser] = useState('')
  const [email, setEmail] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(user, email)

  }
  return (
    <div>
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="enter your name"  onChange={(e) 
            => {setUser(e.target.value)}} value ={user} required />
                
            <input type="email" placeholder="enter your email" onChange={(e)  
            => {setEmail(e.target.value)}} value={email} required />
            <button type="submit">Submit</button>
            
        </form>

    </div>
  )
}

export default Theform;

جمع‌بندی

در این مقاله سعی کردیم با در نظر گرفتن سه مثال مختلف با هوک useState در React آشنا شویم.توجه به این نکته لازم است که این هوک نیز مانند سایر هوک‌های React از قوانین کلی React Hook تبعیت می‌کند.