مقدمه :
ورژن ۱۶ بود ری اکت در یک تغییر انقلابی به سمت هوک ها رفت و از قائده نوشتاری پیش فرض که کلاس بود به سمت فاکشنال رفت و مفهوم جدیدی به اسم کاستوم هوک به وجود اومد در این مقاله سعی دارم در مورد کاستوم هوک های پیش فرض که داخل ری اکت وجود دارند براتون بگم و هر کدوم توضیح مختصری راجبشون بدم که باهاشون بیشتر اشنا بشید
نکته بعضی از کاستوم هوک ها داخل ورژن جدید ری اکت ورژن ۱۸ اضافه شدن که داخل این مقاله اوناهم پوشش دادیم :)
لیستی از کاستوم هوک های که قراره داخل این مقاله بهشون بپردازیم :
کاستوم هوک useState چیه و چکار میکنه ؟
نحوه تعریف useState
import {useState} from "react"
const [count,setCount]=useState(0)
داخل اپلیکیشن ری اکت مون بر اساس یک سری اتفاق باید اجزای داخل DOM واکنش نشون بدن نسبت به عملیاتی رخ میده و تغییر وضعیت رخ میده useState وظیفه اینو داره وضعیت موجود رو داخل حافظه موقتی که وجود داره نگهداری کنه که یک مقدار پیش فرض میتونه دریافت کنه نظیر عدد رشته ارایه ابجکت و ... و خروجی که بهمون میده دو مقدار هستش یک مقدار اولیه دومی یک تابع که میتونیم مقادیر پیش فرض که دادیم رو عوض کنیم یا اضافه کنیم .
کاستوم هوک useEffect چیه و چکار میکنه ؟
نحوه تعریف useEffect :
import {useEffect} from "react"
useEffect (()=>{
//code here
},[])//dependency or []
این کاستوم هوک به ما کمک میکنه به چرخه زندگی کامپوننت دسترسی پیدا کنیم اکثرا داخل useEffect درخواست های api که داخل اپلیکیشن نیاز داریم رو صدا میزنیم useEffect شامل سه بخش از زندگی کامپوننت میشه اگر [] گذاشتیم فقط یک بار کد های داخل useEffect اجرا میشه اگر dependency به useEffect خودمون بدیم وابسته dependency که پاس دادیم میشه هر موقعه این مورد دیتاش عوض شد اجرا میشه میتونه بدون dependency و [] باشه که در این صورت داخل لوپ قرار میگیره و ثانیه یک بار کد های داخل useEffect نوشتید اجرا میشه .
کاستوم هوک useContext چیه و چکار میکنه ؟
اینو بهتون بگم بحث این کاستوم هوک خیلی بحث کلی و کلا مقاله جدا مطلبه اینجا صرفا یک توضیح مختصر راجبش میدیم .
اگر در حال حاضر برنامه نویس React هستید به احتمال خیلی زیاد میدونید که context چیست.در React همه چیز بر مبنای component است و props ها از طریق کامپوننت های والد به فرزندان منتقل می شود.در React کامپوننت ها single directional flow هستند.اما با رشد برنامه این موضوع می تواند در کامپوننت هایی که مجبور هستید اطلاعات رو برای چندین سطح از فرزندان بفرستید دست و پاگیر شود و این اصلا ایده آل نیست.تصور کنید که قرار است اطلاعات کاربر رو در چندین کامپوننت مختلف نمایش دهید.ارسال اطلاعات به این کامپوننت ها از طریق props زیاد جالب نیست.
این مشکل از طریق کتابخونه های جانبی مثل Redux حل شده است که state برنامه رو درون store ذخیره میکند و بین کامپوننت ها به اشتراک می گذارد.همچنین ما میتونیم با استفاده از Context این مشکل رو حل کنیم.Context یک روش برای اشتراک گزاری value ها بین کامپوننت ها بدون پاس دادن props ها از طریق component tree فراهم می کند.
کاستوم هوک React Context API برای حل مشکل پاس دادن value ها به صورت props از طریق tree of components معرفی شد.state های برنامه میتوانند به صورت global ذخیره شوند و بین کامپوننت های مختلف به اشتراک گذاشته شوند.
کاستوم هوک useReducer چیه و چکار میکنه ؟
این کاستوم هوک یک جایگزین مناسب برای useState هستش و ترکیبش با useContext میتونه براتون معجزه کنه من برای درک بهتر از یک مثال استفاده میکنم که داخل اکثر داکیومنت های خارجی این مثال رو میزنن برای درک بهتر
ما می توانیم reducer در Rect را به عنوان یک “Coffee Maker” در نظر بگیریم.اون یک state قدیمی را میگیرد و یک سری عملیات روی آن انجام می دهد و یک state جدید تحویل می دهد(قهوه تازه).
فرض کنید Coffee Maker یا همان قهوه ساز آب و پودر قهوه را می گیرد و یک فتجان قهوه تازه دم شده را بر می گرداند که ما از آن لذت می بریم.بر اساس این مثال reducers توابعی هستند که current state یعنی پودر قهوه و action یعنی آب را می گیرد و یک state جدید یعنی قهوه تازه ایجاد می کند. Reducer ها pure function هایی هستند که state و action را می گیرند و یک state جدید بر می گردانند.
مفهوم pure function چیست ؟ به طوری کلی اگر متدی از این دو حالت پیروی کنه بهش میگن pure function
کاستوم هوک useRef چیه و چکار میکنه ؟
کاستوم هوک useRef یک مقدار اولیه میگیره که بهمون یک ref object قابل تغییر بهمون میده یک مقدار داره به اسم current که مقدارش initial value هست که بهش پاس میدیم و اینکه مقدار این useRef در طول حیاط یک کامپوننت تغییر نمیکنه . فرض کنید یک input داریم میخایم به این المنت دسترسی پیدا کنیم یک Ref میسازیم به این شکل :
const inputRef = useRef(null)
<input ref={inputRef}/>
و الان میتونیم با object ref که بهمون بر میگردونه میتونیم به element input دسترسی پیدا کنیم و ویرایش کنیم و به کلی attribute ها و متد های پیش فرض که داخل جاوا اسکریپت خام بودن دسترسی پیدا کنیم .
ویژگی بعدی که خیلی ها نمیدونن راجبش به کمک useRef شما میتونید به state قبلی هم دسترسی پیدا کنید
کاستوم هوک useMemo چیه و چکار میکنه ؟
احتمالا دیدین داخل اپلیکیشن خودتون وقتی داخل کامپوننت state تغییر میکنه و دوباره rerender میشه تمامی کامپوننت وابسته کامپوننت دوباره re render میشه این یعنی کامپوننت های که اصن هیچ side Effect هم براشون نشده مجددا بارگزاری میشن و این یک بار اضافی برای اپلیکیشن شما خواهد بود .
کاربرد useMemo دقیقا همینه جلوگیری از re render شدن کامپوننت های که هیچ گونه side effect روشون صورت نگرفته باشه و مقدار قبلی که داخل حافظه وجود داره رو برمیگردونه مادامی که یک تغییر بر روی کامپوننت صورت بگیرد .
کاستوم هوک useCallback چیه و چکار میکنه ؟
کاستوم هوک useCallback یک تابع و یک آرایه از dependencies ها به عنوان پارامتر می گیرد.useCallback یک نسخه memoized از callback را برمی گرداند و تنها در صورتی تغییر می کند که یکی ازdependencies ها تغییر کرده باشد. شما همچنین می توانید یک آرایه خالی از dependencies را به عنوان پارامتر پاس دهید که باعث می شود تنها یکبار useCallback اجرا شود.اگر شما اصلا آرایه را پاس ندهید، در هر بار فراخوانی یک value جدید را بر می گرداند.
کاستوم هوک useLayoutEffect چیه و چکار میکنه ؟
کاستوم هوک useLayoutEffect کارش شبیه useEffect هستش اما با این تفاوت که useEffect توی دستکاری دام یکم ضعف داره چون بعد از پینت شدن ui اجرا میشه ، حالا این هوک اومده که اون ضعف رو بپوشونه.
این هوک دقیقا بعد از اجرای رندر و قبل از پینت شدن ui اجرا میشه
ما توی اکثر مواقع از useEffect استفاده میکنیم اما توی این یه مورد ( دستکاری دام) از این هوک استفاده میکنیم
مرورگر ui رو روی صفحه پینت نمیکنه تا این هوک کارش تموم شه پس حواستون باشه که چجوری ازش استفاده میکنید که مشکل پرفورمنس براتون به وجود نیاره همونطور که گفتم اکثر مواقع و برای اکثر کارها همون useEffect کارمون رو راه میندازه.
کاستوم هوک useImperativeHandle چیست و چکار میکنه ؟
زمانی که ما یک ref یا همون ارجاع رو به کامپوننت پدر ارسال کنیم برای ویرایش کردن اون ref میتونیم از این هوک استفاده کنیم ، و این هوک هم به این شکل هست :
useImperativeHandle(ref, createHandle, [deps])
که در اینجا ref همون ارجاعی هست که به کامپوننت پدر ارسال کردیم و createHandle اون تابعی هست که روی ref قراره اجرا بشه و deps هم آرایه ای از وابستگی ها هست که توی بخش useEffect توضیح دادم .
کاستوم هوک useDeferredValue چیست و چکار میکنه ؟
این هوک یک مقدار رو میگیره و یه کپی از اون برمیگردونه و نمایش میده تا زمانی که ما نیاز داریم که به صورت فوری مقدار اپدیت بشه کندی کم تری رو تجربه کنیم برای مثال وقتی که ما یک لیست طولانی داریم از داده ها و یک اینپوت داریم که میخوایم زمانی که کاربر متن رو وارد کرد همزمان اون مقادیری که داریم تغییر کنن ، خب در حالت های عادی ما از صفحه بندی استفاده میکنیم که نیاز نباشه تمام دیتا رو با هم نمایش بدیم یا از راه های دیگه ... اما خب اگه لازم باشه که اطلاعات رو با هم نمایش بدیم به این هوک نیاز پیدا میکنیم ، از این هوک وقتی باید استفاده کرد که دیتایی که میگیریم از یه لایه ی بالاتر بیاد و ما کنترلی روی ست کردن اون مقدار نداشته باشیم توی کامپوننت خودمون ، در اون صورت ما دیتامون رو به این هوک میدیم به این شکل :
const deferredValue = useDeferredValue(value);
و حالا مقدار ما با کندی کمتری تغییر میکنه و تجربه ی کاربری بهتری رو ارائه میدیم .
کاستوم هوک useTransition چیست و چکار میکنه ؟
این هوک هم یه جورایی برای موقعیت هایی شبیه موقعیتی که از هوک useDeferredValue استفاده میکنیم استفاده میشه و کاربردی مثل اون داره یه جورایی ، اما وقتی باید ازش استفاده کنیم که ما کنترل روی ست کردن مقادیرمون داریم .
const [isPending, startTransition] = useTransition();
همونطور که میبینید ما یک هوک داریم که با خودش دو تا المنت isPending و startTransition رو داره ، ما از تابع startTransition برای این استفاده میکنیم که تابع های ست کردن اون استیت هایی که اهمیت کم تری دارند رو داخلش قرار میدیم و بهش میگیم که این استیت که قراره ست بشه رو دیرتر ست کن و خب این باعث میشه همزمانی ست کردن استیت ها از بین بره و یا کم بشه که در نهایت تجربه ی کاربری بهتری ارائه میدیم و سرعت اجرای برنامه بالاتر میاد ، و isPending هم یک مقدار بولین هست که میتونه true یا false باشه که وقتی ازش استفاده میکنیم که میخوایم موقعی که startTransition داره اون ست کردن رو دیر تر انجام میده به کاربر یه پیام یا لودینگ برای مثال نمایش بدیم .
کاستوم هوک useId چیست و چکار میکنه ؟
بالاخره ری اکت دست به کار شد و هوک خودش رو برای ایدی های یونیک معرفی کرد تا دیگه نیاز نباشه برای ساختن ایدی های رندوم و یونیک از پکیج دیگه ای استفاده کنیم ، که خب این خیلی خوبه و برای اینجور مواقع خیلی کاربردیه ، روش استفاده ازش هم به این شکل هست :
const id = useId() ;
در اخر اینکه میتونید خودتون هم کاستوم هوک های شخصی سازی خودتون هم داشته باشید .
خب اینم از اخر این مقاله خوشحال میشم نظرات خودتون رو پایین مقاله برام بنویسید و اگر دوست داشتید لایک کنید و با دوستان خودتون اشتراک بذارید .
