هوک های مورد استفاده در React

در React، هوک‌ها (Hooks) توابعی هستند که به شما اجازه می‌دهند بدون نوشتن کلاس، از state و دیگر قابلیت‌های React استفاده کنید. در ادامه مهم‌ترین هوک‌های React را با توضیح معرفی می‌کنم:

useState

این هوک برای تعریف state در یک کامپوننت تابعی استفاده می‌شود. شما می‌توانید یک مقدار اولیه به آن بدهید و تابعی برای به‌روزرسانی آن مقدار نیز دریافت کنید.

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

useEffect

این هوک برای مدیریت (مانند فراخوانی API، تنظیم تایمر، یا تعامل با DOM) در کامپوننت‌های تابعی استفاده می‌شود. می‌تواند مشابه متدهای componentDidMount, componentDidUpdate, و componentWillUnmount در کلاس‌ها عمل کند.

useEffect(() => {
  // این کد در هر بار رندر شدن اجرا می‌شود
  console.log('Component rendered');

  // این تابع تمیزکننده است و بعد از هر رندر یا حذف کامپوننت اجرا می‌شود
  return () => {
    console.log('Component cleaned up');
  };
}, []); // اگر از آرایه خالی استفاده شود، فقط یک‌بار اجرا می‌شود (مثل componentDidMount).

useContext

این هوک برای دسترسی به مقادیر Context (مقادیر سراسری در اپلیکیشن) استفاده می‌شود. شما می‌توانید Context را در سرتاسر کامپوننت‌ها بدون نیاز به پراپ‌زنی (props drilling) به اشتراک بگذارید.

const value = useContext(MyContext);

useReducer

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

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

useRef

این هوک به شما امکان می‌دهد یک شیء mutable (قابل تغییر) ایجاد کنید که در کل چرخه عمر کامپوننت ثابت بماند. معمولاً برای دسترسی مستقیم به عناصر DOM یا ذخیره مقادیری که باعث رندر مجدد نمی‌شوند، استفاده می‌شود.

const inputRef = useRef(null);

useMemo

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

const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);

useCallback

شبیه به useMemo است، اما به جای محاسبه یک مقدار، یک تابع بازگشتی می‌دهد که تنها زمانی که وابستگی‌ها تغییر کنند، به روز می‌شود.

const handleClick = useCallback(() => {
  console.log('Clicked');
}, []);

useLayoutEffect

این هوک مشابه useEffect است، با این تفاوت که در فاز layout رندر React اجرا می‌شود، یعنی قبل از نمایش به کاربر. از آن زمانی استفاده می‌شود که نیاز دارید تغییرات شما در DOM بلافاصله قبل از رندر اعمال شود.

useLayoutEffect(() => {
  console.log('Layout effect');
});

useImperativeHandle

این هوک به شما اجازه می‌دهد که کنترل بیشتری روی رفرنس‌ها (Refs) در کامپوننت‌های تابعی داشته باشید. معمولاً به همراه forwardRef استفاده می‌شود.

useImperativeHandle(ref, () => ({
  scrollToTop() {
    scrollRef.current.scrollTop = 0;
  }
}));

useDebugValue

این هوک برای دیباگ کردن هوک‌های سفارشی (custom hooks) استفاده می‌شود. می‌توانید برای هر هوک سفارشی یک مقدار دیباگ مشخص کنید که در ابزارهای دیباگ نمایش داده شود.

useDebugValue(isOnline ? 'Online' : 'Offline');

این لیست از هوک‌های اصلی React است که برای مدیریت state، اثرات جانبی، رفرنس‌ها و بهینه‌سازی رندر استفاده می‌شوند.