مروری بر Hookهای اصلی React

مروری بر مهم‌ترین Hookهای اصلی React

تا اینجا با useState، useEffect و به‌طور مختصر با useRef کار کرده‌ایم. پیش از این‌که در درس‌های بعدی، هرکدام از این Hookها را با جزئیات کامل بررسی کنیم، در این درس یک نمای کلی و مختصر از مهم‌ترین Hookهای اصلی React ارائه می‌دهیم تا تصویر روشنی از نقش هرکدام داشته باشیم.

useState: نگهداری یک مقدار قابل تغییر

useState به یک کامپوننت اجازه می‌دهد مقداری را نگه دارد که در طول زمان تغییر می‌کند و با هر تغییر، رندر مجدد را درخواست می‌دهد. با جزئیات کامل این Hook در فصل سوم آشنا شدیم.

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

useEffect: هماهنگی با سیستم‌های خارج از React

useEffect برای اجرای کدی استفاده می‌شود که باید پس از رندر شدن کامپوننت انجام شود؛ معمولاً برای هماهنگ‌سازی با چیزی خارج از React، مانند تایمر، اشتراک در یک رویداد یا درخواست به سرور. جزئیات کامل این Hook، شامل مفهوم Dependency Array و Cleanup، موضوع فصل ششم است.

useEffect(() => {
  document.title = `تعداد: ${count}`;
}, [count]);

useRef: نگهداری مقداری که باعث رندر مجدد نمی‌شود

useRef مقداری را نگه می‌دارد که در طول رندرهای مختلف باقی می‌ماند، اما برخلاف State، تغییر آن باعث رندر مجدد کامپوننت نمی‌شود. رایج‌ترین کاربرد آن، دسترسی مستقیم به یک عنصر DOM است؛ همان‌طور که در فصل چهارم، برای Uncontrolled Components از آن استفاده کردیم. جزئیات کامل آن در فصل هفتم بررسی می‌شود.

const inputRef = useRef(null);

useContext: خواندن مقدار از یک Context

useContext به یک کامپوننت اجازه می‌دهد مقداری را که در یک سطح بالاتر از درخت کامپوننت‌ها، از طریق Context تعریف شده، مستقیماً بخواند؛ بدون این‌که آن مقدار لایه‌به‌لایه از طریق Props منتقل شود. این Hook، راه‌حلی برای مشکل Prop Drilling است که با جزئیات کامل در فصل هشتم بررسی می‌شود.

const theme = useContext(ThemeContext);

useReducer: مدیریت State پیچیده‌تر با منطق متمرکز

useReducer جایگزینی برای useState است که برای موقعیت‌هایی مناسب‌تر است که منطق به‌روزرسانی State پیچیده‌تر است یا شامل چند زیرمقدار مرتبط به هم می‌شود. این Hook، تمام منطق تغییر State را در یک تابع واحد به نام Reducer متمرکز می‌کند و در فصل نهم با جزئیات کامل بررسی می‌شود.

const [state, dispatch] = useReducer(reducer, initialState);

useMemo و useCallback: کنترل محاسبات و توابع تکراری

useMemo و useCallback دو Hook مرتبط با عملکرد هستند که کمک می‌کنند از محاسبه دوباره یک مقدار، یا ساخت دوباره یک تابع، در رندرهایی که واقعاً نیازی به آن نیست، جلوگیری شود. جزئیات و کاربرد درست این دو Hook، به همراه مفهوم مهم Referential Equality، در فصل سیزدهم بررسی می‌شود.

چرا این نمای کلی مفید است

دانستن این‌که هر Hook برای چه نوع مسئله‌ای طراحی شده، کمک می‌کند وقتی با یک مسئله واقعی روبه‌رو می‌شویم، سریع‌تر Hook مناسب را انتخاب کنیم؛ به‌جای این‌که مثلاً برای هر نیاز، بدون فکر، از useState استفاده کنیم. در ادامه دوره، هرکدام از این Hookها را با مثال‌های عملی و جزئیات کامل بررسی خواهیم کرد.

مثال قابل اجرا

استفاده هم‌زمان از چند Hook اصلی

import { useState, useEffect, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
  });

  return (
    <div>
      <p>شمارنده: {count}</p>
      <p>تعداد رندر: {renderCountRef.current}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

React مجموعه‌ای از Hookهای اصلی ارائه می‌دهد که هرکدام برای یک نوع نیاز مشخص طراحی شده‌اند: useState برای State ساده، useEffect برای هماهنگی با دنیای خارج از React، useRef برای مقادیر پایدار بدون رندر مجدد، useContext برای اشتراک‌گذاری مقدار بدون Prop Drilling، useReducer برای منطق State پیچیده‌تر، و useMemo/useCallback برای بهینه‌سازی. در درس بعدی به نحوه تفکر صحیح درباره Hooks می‌پردازیم.