هوک در ری اکت چیست؟ + نکات کاربردی مهم

در دنیای برنامه‌نویسی فرانت‌اند، کتابخانه‌ی React یکی از پرکاربردترین ابزارها برای ساخت رابط‌های کاربری مدرن است. اگر کمی با React کار کرده باشید، حتماً با عبارت‌هایی مثل state، props یا lifecycle آشنا هستید. اما از زمانی که نسخه ۱۶.۸ ری‌اکت منتشر شد، مفهومی به نام هوک در ری اکت (React Hooks) همه‌چیز را تغییر داد.

تا پیش از آن، فقط با کامپوننت‌های کلاسی می‌شد از قابلیت‌هایی مثل مدیریت وضعیت (state) یا اجرای کد هنگام بارگذاری صفحه استفاده کرد. ولی حالا با کمک هوک ها در ری اکت، می‌توان همین امکانات را در کامپوننت‌های تابعی هم داشت؛ بدون نیاز به کلاس نویسی!

در این مقاله از بلاگ آموزشگاه کندو به زبان ساده بررسی می‌کنیم که Hook در ری اکت چیست، چه کاربردی دارد، چرا معرفی شده و چطور باعث ساده‌تر شدن توسعه در React شده است. همچنین نگاهی خواهیم داشت به انواع هوک در ری اکت و برخی نکات مهم برای استفاده صحیح از آن‌ها.

اگر با مفاهیم پایه‌ای جاوا اسکریپت آشنا هستید یا در حال گذراندن دوره ی جاوا اسکریپت یا دوره ری اکت هستید، این مقاله می‌تواند دید بهتری درباره‌ی hook در react به شما بدهد.

هوک در ری اکت چیست؟

هوک در ری‌اکت در واقع مجموعه‌ای از توابع هستند که به توسعه‌دهندگان اجازه می‌دهند از امکاناتی مانند state، اثرات جانبی (side effects) و context در کامپوننت‌های تابعی استفاده کنند؛ یعنی بدون نیاز به نوشتن کلاس. به بیان ساده‌تر، هوک ها در ری اکت پلی هستند میان راحتی کامپوننت‌های تابعی و قدرت کلاس کامپوننت‌ها. با کمک آن‌ها می‌توان رفتارهایی مانند ذخیره‌سازی داده، واکنش به تغییرات، یا ارتباط با منابع بیرونی را به شکلی ساده و قابل فهم پیاده‌سازی کرد. اگر بخواهیم بدانیم Hook در ری اکت چیست، باید بگوییم که یک راهکار ساده‌سازی و مدرن‌سازی توسعه با React است.برای آشنایی بیشتر مطلب آموزش نصب و راه اندازی React Js را از بلاگ ما بخوانید.

چرا هوک‌ها معرفی شدند؟

قبل از معرفی هوک‌ها، توسعه‌دهندگان مجبور بودند برای استفاده از ویژگی‌هایی مانند state یا lifecycle از کامپوننت‌های کلاسی استفاده کنند. این مسئله باعث می‌شد کدها پیچیده، طولانی و گاهی غیرقابل نگهداری شوند، مخصوصاً وقتی پروژه بزرگ می‌شد. تیم React برای حل این چالش‌ها، هوک در ری‌اکت را معرفی کرد تا بتوان این قابلیت‌ها را در کامپوننت‌های تابعی هم استفاده کرد. این تغییر باعث شد ساختار کدها خواناتر، ساده‌تر و انعطاف‌پذیرتر شود. همچنین، استفاده از hook در react امکان نوشتن کدهای قابل استفاده مجدد (reusable) را بسیار راحت‌تر کرد. به همین دلیل، در نسخه‌های جدید React استفاده از هوک‌ها به یک استاندارد تبدیل شده است.

انواع هوک در ری اکت

در این بخش می‌خواهیم با انواع هوک در ری اکت که به صورت پیش‌فرض (built-in) در اختیار برنامه‌نویس قرار گرفته‌اند آشنا شویم. این هوک‌ها ابزارهای قدرتمندی هستند که برای کاربردهای رایج در توسعه React طراحی شده‌اند.

useState

یکی از پرکاربردترین هوک‌ها در ری‌اکت، useState است. این هوک به ما اجازه می‌دهد که در کامپوننت‌های تابعی، یک متغیر state تعریف کنیم. برای مثال، می‌توانیم وضعیت یک فرم، یک شمارنده یا وضعیت نمایش/مخفی بودن یک منو را با useState کنترل کنیم. این هوک در ری اکت، یک مقدار اولیه می‌گیرد و دو چیز به ما برمی‌گرداند: مقدار فعلی state و تابعی برای به‌روزرسانی آن. 

useEffect

هوک useEffect برای انجام عملیات‌های جانبی یا همان side effects استفاده می‌شود. مثلاً وقتی می‌خواهیم بعد از بارگذاری صفحه داده‌ای را از یک API بگیریم یا عنوان صفحه را تغییر بدهیم، از useEffect استفاده می‌کنیم. این هوک شبیه متدهای lifecycle در کامپوننت‌های کلاسی عمل می‌کند و با توجه به آرایه‌ی وابستگی (dependency array) مشخص می‌کند که چه زمانی اجرا شود.

useContext

برای زمانی که نیاز داریم اطلاعاتی مانند زبان، موضوع رنگ (تم)، یا اطلاعات کاربر را در چندین کامپوننت به اشتراک بگذاریم، هوک useContext بسیار کاربردی است. این هوک به ما اجازه می‌دهد تا به راحتی به context تعریف شده در سطح بالاتر دسترسی پیدا کنیم، بدون اینکه مجبور باشیم props را مرحله به مرحله به پایین منتقل کنیم.

useRef

گاهی اوقات لازم است که به یک عنصر HTML در صفحه دسترسی مستقیم داشته باشیم (مثل فکوس دادن به یک input)، یا بخواهیم یک مقدار را بدون رندر مجدد نگه داریم. در این مواقع، useRef به کمک ما می‌آید. این هوک یک شی ref ایجاد می‌کند که مقدار آن در طول رندرها ثابت می‌ماند.

useReducer

اگر منطق مدیریت state ما پیچیده‌تر از حالت‌های ساده باشد – مثلاً چند حالت مختلف یا تغییرات زنجیره‌ای داشته باشیم – بهتر است به جای useState از useReducer استفاده کنیم. این هوک شبیه ساختار reducer در Redux کار می‌کند و به ما اجازه می‌دهد تا با ارسال اکشن‌ها (actions) وضعیت را کنترل کنیم.

useMemo و useCallback

این دو هوک بیشتر برای بهینه‌سازی عملکرد کاربرد دارند. useMemo از اجرای دوباره‌ی محاسبات سنگین جلوگیری می‌کند و فقط زمانی مقدار جدید می‌سازد که وابستگی‌ها تغییر کنند. در حالی که useCallback باعث می‌شود توابع تنها در صورت تغییر وابستگی‌ها دوباره ساخته شوند. استفاده‌ی درست از این دو می‌تواند باعث بهبود سرعت و کاهش رندرهای غیر ضروری شود.

این‌ها مهم‌ترین هوک ها در ری‌اکت هستند که به‌طور پیش‌فرض در اختیار شما قرار دارند. آشنایی با این ابزارها به شما کمک می‌کند که در مسیر یادگیری hook در react حرفه‌ای‌تر عمل کنید و پروژه‌های بهتری بسازید. برای مطالعه بیشتر مقاله کامپوننت در برنامه نویسی چیست و چه مزایا و معایبی دارد؟ را از بلاگ کندو بخوانید.

هوک‌های سفارشی (Custom Hooks) چیستند؟

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

یک Custom Hook درست مثل یک تابع جاوا اسکریپت معمولی تعریف می‌شود که اسم آن باید با use شروع شود، مثل: useScrollPosition یا useFetchData. همچنین می‌توانید از useState ،useEffect یا سایر هوک ها در ری‌اکت استفاده کنید تا منطق دلخواه‌تان را پیاده‌سازی کنید. برای مطالعه بیشتر مقاله آشنایی با مهم‌ترین اصطلاحات برنامه نویسی را بخوانید

مزیت اصلی استفاده از هوک‌های سفارشی این است که کدها را تمیزتر، ماژولارتر و قابل نگهداری‌ می‌کند. در پروژه‌های واقعی، معمولاً تعداد زیادی hook در react داریم که با همین روش نوشته شده‌اند و بار بزرگی از دوش توسعه‌دهنده برمی‌دارند.

به‌خصوص اگر در حال گذراندن یک دوره ری‌اکت یا دوره‌ی جاوا اسکریپت هستید، خیلی مهم است که زودتر با این مفهوم آشنا شوید زیرا در پروژه‌های عملی، استفاده از هوک‌های سفارشی کاملاً رایج است.

چند نکته‌ی مهم درباره استفاده از هوک‌ها

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

فقط در سطح بالای کامپوننت استفاده شود

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

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

Hook در react فقط در دو جا باید استفاده شود: یا در یک کامپوننت تابعی یا در یک هوک سفارشی. نباید آن‌ها را در توابع معمولی یا کلاس‌ها استفاده کنید. این یکی از تفاوت‌های مهم بین React مدرن و نسخه‌های قدیمی‌تر است.

نام‌گذاری با پیشوند use

اگه قرار باشد هوک سفارشی بنویسید، باید با use شروع شود. این کار هم برای تشخیص سریع‌تر کاربرد هوک‌ها مفید است، هم به React کمک می‌کند آن را به عنوان یک hook بشناسد.

استفاده به‌جا از هوک‌ها

استفاده‌ی زیاد یا نادرست از هوک‌ها ممکن است باعث پیچیدگی یا افت عملکرد شود. مثلاً استفاده‌ی بی‌مورد از useEffect می‌تواند باعث اجراهای مکرر و ناخواسته شود. پس بهتر است نحوه‌ی درست به‌کارگیری آن‌ها را یاد بگیرید.

استفاده از ESLint برای بررسی رعایت قواعد

برای اینکه مطمئن شوید قوانین استفاده از هوک‌ها رعایت می‌شوند، می‌توانید از افزونه‌ی ESLint مخصوص React Hooks استفاده کنید. این ابزار خطاهای رایج رو خیلی سریع شناسایی می‌کنند.

سخن آخر

در این مقاله با مفهوم هوک در ری اکت آشنا شدیم و دیدیم که چطور هوک‌ها به عنوان راه‌حلی نوآورانه معرفی شدند تا مشکلاتی مثل تکرار منطق در کلاس‌کامپوننت‌ها یا سختی مدیریت وضعیت را برطرف کنند. یاد گرفتیم که Hook در ری‌اکت چیست، چرا اهمیت دارد و چطور می‌توانیم با استفاده از هوک های اصلی (Built-in Hooks) مانند useState و useEffect نیازهای پایه‌ای پروژه را پوشش دهیم.

همچنین با هوک‌های سفارشی آشنا شدیم که به ما کمک می‌کنند منطق پیچیده را بین چند کامپوننت به اشتراک بگذاریم، بدون اینکه کدهای تکراری بنویسیم. در نهایت نیز نکات مهمی را مرور کردیم که باید هنگام استفاده از hook در react در نظر بگیریم تا کدی تمیزتر، کاراتر و قابل‌فهم‌تر داشته باشیم.

فرقی نمی‌کنه در حال یادگیری اولیه باشید یا در میانه یک دوره ری‌اکت یا حتی دوره‌ی جاوا اسکریپت؛ فهم درست از هوک ها در ری‌اکت و آشنایی با انواع هوک در ری‌اکت، نقطه‌ی عطفی در مسیر تبدیل‌شدن به یک توسعه‌دهنده حرفه‌ایه. با تمرین و تجربه، خیلی زود متوجه می‌شی که چطور استفاده‌ی درست از هوک‌ها می‌تونه کیفیت کل پروژه‌ات رو تغییر بده.

سوالات متداول 

در ادامه به چند پرسش متداول در مورد هوک در ری اکت پاسخ می‌دهیم:

هوک در ری اکت چیست؟

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

چرا باید از هوک‌ها استفاده کنیم؟

استفاده از هوک‌ها باعث می‌شود که کد تمیزتر، قابل‌خواندن‌تر و ماژولارتر باشد و از پیچیدگی‌های مدیریت state در کامپوننت‌های کلاسی جلوگیری می‌کند.

چه تفاوتی بین هوک‌های اصلی و هوک‌های سفارشی در ری‌اکت وجود دارد؟

هوک‌های اصلی مانند useState و useEffect به طور پیش‌فرض در ری‌اکت موجودند، اما هوک‌های سفارشی توسط توسعه‌دهندگان ساخته می‌شوند تا منطق‌های تکراری را در پروژه‌های مختلف به اشتراک بگذارند.

آیا می‌توان از هوک‌ها در کلاس‌ها استفاده کرد؟

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

چطور می‌توانم یک هوک سفارشی بسازم؟

برای ساخت یک هوک سفارشی، کافی است یک تابع جدید تعریف کنید که از هوک‌های اصلی مثل useState یا useEffect استفاده کند و منطق مورد نظر شما را در خود داشته باشد. نام هوک باید با use شروع شود.

آیا استفاده از همه هوک‌ها الزامی است؟

خیر. شما فقط باید از هوک‌ها در مواقعی استفاده کنید که واقعا به آن‌ها نیاز دارید. استفاده غیرضروری از هوک‌ها ممکن است باعث پیچیدگی در کد شما شود.