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

هوک ها(Hooks) از بخش های بسیار مهم کتابخانه‌ی ریکت(React) هستند. یکی از زیر مجموعه های هوک ها، کاستوم هوک ها(Custom Hooks) هستند که در این مقاله می‌خواهم که به وسیله‌ی 2 مثال آنها را بررسی کنم.منبع من برای این مقاله، کتاب The Road to React و داکیومنت سایت ریکت می‌باشد.کاستوم هوک ها چی هستند؟کتابخانه‌ی ریکت به طور پیشفرض دارای تعدادی هوک مانند useState، useEffect و useContext است. اما گاهی اوقات با خودمون فکر می‌کنیم که کاش هوک هایی برای کار های جزیی تر وجود داشت. مثلا برای گرفتن دیتا از سمت سرور(data fetching) و یا چک کردن وضعیت اینترنت کاربر.اینجاست که کاستوم هوک ها وارد عمل می‌شوند. یعنی ما می‌تونیم هوک های مخصوص خودمون رو بسازیم.مثال اولفرض کنید که در حال نوشتن برنامه‌ای هستید که وابسته به آنلاین بودن کاربر می‌باشد. در این برنامه باید هنگامی که اینترنت کاربر به طور تصادفی قطع می‌شود، به او هشدار دهیم. چطوری این کارو انجام بدیم؟ به نظر میرسه که به 2 چیز در کامپوننت خود نیاز داریم :یک استیت(State) که وضعیت اینترنت را درون خودش ذخیره کند.یک هوک useEffect که با تغییر وضعیت اینترنت، مقدار استیت را آپدیت کند.حالا تصور کنید که همین کد را در کامپوننت دیگه‌ای هم لازم داشته باشیم. به طور مثال یک کامپوننت دکمه(Button) که وقتی اینترنت کاربر قطع می‌شود، دکمه غیر فعال شود :این کامپوننت ها هر دو به خوبی کار می‌کنند اما این تکرار کد کار درستی نیست.(مثلا اگه همین تیکه کد توی 5 تا کامپوننت دیگه هم لازم شد، درست نیست که دوباره همین رو توی همشون کپی کنیم)مشخصه که راه حل این مشکل، استفاده از کاستوم هوک هاست. باید این قسمت از کدی که در حال تکرار است را به هوک مخصوص خودمون انتقال بدیم (مثلا اسمش رو میزاریم useOnlineStatus) : فقط نکته‌ای که وجود دارد این است که باید در انتهای کاستوم هوک خودمون، مقدار خروجی(Return) را برابر با استیت isOnline قرار دهیم.پس از ساختن این کاستوم هوک، حالا کد ما به شکل زیر در می‌آید :این کار 2 تا مزیت مهم برای ما ایجاد می‌کند :مقدار کد کاهش یافت و دیگر کد های ما تکرار نمی‌شوند. کد ما یک بار و در یک جا نوشته شده است و از این به بعد فقط از هوک مخصوص به خودش استفاده می‌کنیم.کد خوانا تر می‌شود. کسی که کد را برای اولین بار می‌خواند، متوجه می‌شود که قرار است از طریق کاستوم هوک useOnlineStatus، وضعیت اینترنت کاربر را متوجه شویم. پس درگیر جزییات کاستوم هوک نخواهد شد.نکته نهایی: در شروع اسم کاستوم هوک ها از کلمه‌ی use استفاده می‌کنیم. البته این یک باید نیست و صرفا قرادادی است که بهتر است رعایت شود. به این دلیل که تفاوت هوک ها با توابع عادی مشخص شود.مثال دومدر این مثال که کمی پیشرفته تر است، قرار است یک کاستوم هوک با اسم useSemiPersistentState ایجاد کنیم. وظیفه‌‌اش این است که مقادیر درون استیت های ما را با Local Storage مرورگر هماهنگ کند.عکس زیر شکل برنامه‌ی ما پس از استفاده از این کاستوم هوک است :حال به بررسی محتوای خود کاستوم هوک می‌پردازیم. کاستوم هوک ما در ابتدا به صورت زیر می‌باشد :تا اینجای کار، کاستوم هوک ما شامل هوک های useState و useEffect است. البته هنوز کامل نیست. 2 تا چیز دیگر هم باید به آن اضافه کنیم:مقدار اولیه‌ی استیت به عنوان ورودی کاستوم هوکریترن کردن(Return) استیت در قالب یک آرایهبعد از انجام دادن این مراحل، باید چنین چیزی داشته باشیم :در حال حاضر این کاستوم هوک به درستی کار می‌کند ولی نیاز به ریفکتور دارد.بهتر است که کمی آن را جامع تر (و نه فقط برای استیت searchTerm) بنویسیم، زیرا که ممکن است در قسمت های مختلفی از برنامه‌ی ما استفاده شود.بعد از ریفکتور، کد ما به شکل زیر می‌شود :همچنان تا اینجا همه چیز به درستی کار می‌کند. ولی به یک ریفکتور دیگر هم احتیاج داریم.اگر این کاستوم هوک را 2 یا چند بار در قسمت های مختلف برنامه استفاده کنیم، مقدار درون Local Storage جایگزین مقادیر قبلی میشود و مقادیر قبلی از بین می‌روند. دلیلش هم این است که ما در کد کاستوم هوک خود از مقداری ثابت به اسم "value" استفاده کرده‎‌ایم.برای حل این مشکل، می‌توانیم این مقدار value را هم از ورودی هوک دریافت کنیم(اسم آن را key می‌گذاریم) :حالا کاستوم هوک ما به صورت جامع تر و کلی تر درآمده است. پس می‌توانیم از آن در قسمت های مختلف برنامه، به صورت زیر استفاده کنیم:جمع بندییکی از مهم ترین اهداف ما در نوشتن یک برنامه، نوشتن کدی تمیز و قابل مدیریت است. یکی از راه های رسیدن به این هدف، استفاده از ابزار هایی مانند کاستوم هوک می‌باشد. امیدوارم که این بحث رو کامل متوجه شده باشید و مفهوم رو به خوبی رسونده باشم. اگه نظری بود حتما در قسمت کامنت ها بنویسید.