شروع با React Hooks: useState و useEffect به زبان ساده

هوک‌ها از نسخه‌ی ۱۶٫۸ به React اضافه شدند و امروز روش اصلی نوشتن کامپوننت‌ها هستند. در این آموزش دو هوک پرکاربرد، useState و useEffect، را با یک مثال کوچک و کاربردی می‌سازیم.

#نگه‌داشتن وضعیت با useState

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

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      تعداد کلیک: {count}
    </button>
  )
}

#اثرهای جانبی با useEffect

هر کاری که بیرون از رندر اتفاق می‌افتد — دریافت داده، تایمر، گوش‌دادن به رویدادها — جایش در useEffect است.

import { useEffect, useState } from 'react'

export function Clock() {
  const [now, setNow] = useState(() => new Date())

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000)
    return () => clearInterval(id) // پاک‌سازی هنگام حذف کامپوننت
  }, []) // آرایه‌ی خالی: فقط یک بار اجرا شود

  return <time>{now.toLocaleTimeString('fa-IR')}</time>
}

#آرایه‌ی وابستگی‌ها

• بدون آرایه: بعد از هر رندر اجرا می‌شود.

• آرایه‌ی خالی []: فقط بعد از اولین رندر.

• [a, b]: هر بار که a یا b تغییر کند.

#جمع‌بندی

با همین دو هوک بخش بزرگی از نیازهای روزمره را پوشش می‌دهید. در نوشته‌ی بعدی سراغ useMemo و useCallback می‌رویم.