هوک ها در ری اکت ! بررسی تخصصی 11 هوک در React !

استفاده از هوک ها در React خیلی ساده اما بشدت کاربردیه ! اگه React Developer هستید این مقاله برای شما نوشته شده. چراکه درک عمیق هوک ها در ری اکت از نون شب برای یک توسعه دهنده ری اکت واجب تره ?به عنوان یک React Developer باید درک صحیح و عمیقی از هوک های ری اکت داشته باشیم و میخوایم تو این مقاله 11 مورد از بهترین هوک های React رو بررسی کنیم ?با فِرانت اِندی همراه باشید …هوک useState ری اکتاولین هوک در ری اکت ، هوک useState هست.زمانیکه یک کامپوننت از نوع فانکشنال داشته باشیم ، هوک useState به ما اجازه میده داخل همون کامپوننت یک مقدار رو ذخیره و مدیریت کنیم.در واقع هر نوع اطلاعات با هر نوع Type رو میتونیم داخل کامپوننت خودمون توسط هوک useState ذخیره کنیم.بطور مثال اطلاعات کاربر ، یک متن ، اطلاعات دریافتی از سرور و ..ساختار کلی useState در React بصورت زیر هست :const [name,setName] = useState('FrontEndi')تو تیکه کد بالا از هوک useState استفاده کردیم. مقدار name در تیکه کد بالا همیشه مقدار ذخیره شده رو به ما برمیگردونه.یعنی توسط name میتونیم به مقدار فعلی State دسترسی داشته باشیم. ( مقدار فعلی FrontEndi هست )اگه دوست دارید 0 تا 100 هوک useState ری اکت رو بدونید ، ما یه مقاله تخصصی راجب این هوک منتشر کردیم . پیشنهاد میکنم آموزش هوک useState ری اکت رو مطالعه کنید.هوک useEffect ری اکتدومین هوک React ، هوک useEffect هست.بهترین و دقیق ترین تعریفی که میشه از هوک useEffect داشت این هست :هوک useEffect به ما امکان مدیریت Side Effect های اپیکیشن رو میده.اما Side Effect یعنی چی ؟ هر رفتار یا عملی که باعث تاثیر خارجی در Function شود را Side Effect میگوییم.بطور خلاصه و ساده موارد زیر Side Effect هستن و برای چنین مواردی باید از useEffect استفاده کنیم :دریافت هر اطلاعاتی از سرور ( Fetch )دسترسی یا ویرایش Local Storageتغییر عنوان Tab مرورگر و ..هوک useEffect همچنین به ما امکان مدیریت چرخه حیات کامپوننت رو میده. مثلا میتونیم مدیریت کنیم زمانیکه کامپوننت وارد DOM شد چه اتفاقی بیوفته یا زمانی که از DOM حذف شد چه عملی اتفاق بیوفته . یا حتی زمانیکه re-Render صورت گرفت چه اتفاقی بیوفته.شکل کلی استفاده از هوک useEffect بصورت زیر هست :useEffect(()=>{ // انجام یه کاری }, []); //تو خط شماره 2 باید عمل خودمون رو بنویسیم. هر کدی رو میشه داخل تابع موجود در خط 2 نوشت مثل دریافت لیست محصولات از back-End.تو خط شماره 3 یک Array داریم که باید لیست وابستگی های خودمون رو داخل این آرایه بنویسیم. در حقیقت تو این آرایه مشخص میکنیم که چه زمانی باید خط 2 اجرا بشه.درصورتی که این آرایه خالی باشه ، تابع یا Action ما فقط یکبار پس از اولین Render اجرا میشه.این یک مثال ساده از هوک useEffect بود. توسط این هوک میتونیم کار های بیشتری رو انجام بدیم. داخل مقاله آموزش هوک useEffect تمامی این موارد رو با ذکر مثال توضیح دادیم.هوک useContext ری اکتسومین هوک React ، هوک useContext هست.هوک useContext به ما امکان به اشتراک گذاری Data بین کامپوننت های مختلف رو میده. در واقع useContext یک روش انتقال داده بین کامپوننت ها بدون استفاده از Props هست .زمانیکه کامپوننت های تو در توی زیادی داشته باشیم ، انتقال Props ها خیلی منطقی نیست و باعث شلوغ و کثیف شدن کامپوننت های ما میشه ( Props Drilling ).برای رفع مشکل Props Drilling و به اشتراک گذاری راحت تر Data بین کامپوننت های مختلف میتونیم از هوک useContext استفاده کنیم.با useContext ری اکت میشه هر نوع دیتایی رو بین کامپوننت ها به اشتراک گذاشت اما برای مواردی مثل زبان سایت ، اطلاعات کاربر ، دارک مود و .. بیشترین کاربرد رو داره.برای استفاده از هوک useContext بصورت زیر عمل میکنیم:import { createContext } from 'react'; // تابع خود ری اکت برای ساخت کانتکست export const Context = createContext('یه مقداری');حالا باید Context ساخته شده رو بین کامپوننت های خودمون به اشتراک بگذاریم :import { Context } from './context'; // این همون کانتکستی هست که در تیکه کد قبلی ساختیمش function App() { const value = 'مقداری که میخوایم تو اپیکیشن ازش استفاده کنیم'; return ( <Context.Provider value={value}> <MyComponent /> </Context.Provider> ); }تو تیکه کد بالا ، Value خودمون رو به تمامی کامپوننت های موجود در App ( یعنی کامپوننت MyComponent و فرزندانش ) به اشتراک گذاشتیم.حالا باید در جایی که به این Data نیاز داریم ، Context خودمون رو فراخوانی کنیم :import { useContext } from 'react'; // فراخوانی هوک یوز کانتکست import { Context } from './context'; // همون کانتکستی که در مراحل قبل ساختیم function MyComponent() { const value = useContext(Context); // دریافت مقدار - get Context Value return <span>{value}</span>; // نمایش مقدار - Show Context Value }به اینصورت میتونیم یک Data رو بین کامپوننت های مختلف بدون استفاده از Props منتقل کنیم.هوک useLayoutEffect ری اکتچهارمین هوک در React ، هوک useLayoutEffect هست.هوک useLayoutEffect ری اکت خیلی شبیه هوک useEffect هست اما باهمدیگه تفاوت هایی دارن.شکل کلی استفاده از هوک useLayoutEffect ری اکت بصورت زیر هست :useLayoutEffect(() => { //do something }, [arrayDependency]) // Dependenciesبا نگاه کردن به ساختار استفاده از هوک useLayoutEffect شاید این سوال براتون پیش بیاد که تفاوت هوک useLayoutEffect و هوک useEffect چیست ؟تفاوت هوک useEffect و useLayoutEffectتابع بروزرسانی useEffect بعد از Render شدن کامپوننت در DOM اجرا میشه. اما تابع بروزرسانی useLayoutEffect قبل از Render کامپوننت در DOM اجرا میشه.هوک useReducer ری اکتپنجمین هوک از هوک های ری اکت ، هوک useReducer هست.هوک useReducer تا حدود زیادی شبیه هوک useState هست اما تفاوت هایی باهمدیگه دارن. بطور کل از هوک useReducer برای ذخیره و مدیریت State هایی که پیچیدگی بیشتری دارن و بروزرسانی State باتوجه به مقدار قبلی State ، استفاده میکنیم.شکل کلی استفاده از هوک useReducer بصورت زیر هست :const [count, dispatch] = useReducer(reducer, initialState);تو مقاله آموزش هوک useReducer ری اکت بصورت کامل و با جزئیات خیلی بیشتری این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.هوک useCallback ری اکتششمین Hook ری اکت ، هوک useCallback هست.هوک useCallback ری اکت توابع شمارو کش میکنه و در re-Render های مختلف کامپوننت ، نتیجه همون تابع کش شده رو استفاده میکنه و دیگه اون تابع رو اجرا نمیکنه ( تا زمانیکه آرگومان های اون تابع تغییر کنن )شکل کلی استفاده از هوک useCallback بصورت زیر هست :const x = useCallback(callback, dependencies)تو مقاله آموزش هوک useCallback ری اکت بصورت تخصصی و با جرئیات خیلی بیشتری این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.هوک useMemo ری اکتهفتمین Hook در React ، هوک useMemo هست.هوک useMemo در واقع یک تابع هست که یک مقدار کش شده برای ما Return میکنه.( Memoized Value )هوک useMemo خیلی شبیه هوک useCallback هست اما باهمدیگه متفاوت هستن.نحوه استفاده از هوک useMemo در React بصورت زیر هست :const cachedValue = useMemo(function,dependencies)از هوک useMemo برای بهبود Performance و بهینه سازی اپیکیشن های ری اکتی میتونیم استفاده کنیم. تو مقاله آموزش هوک useMemo ری اکت بصورت دقیقتر و با جزئیات و مثال به بررسی این هوک خفن پرداختیم.هوک useRef ری اکتهشتمین هوک در ری اکت ، هوک useRef هست.کاربرد اصلی هوک useRef ری اکت ، دسترسی مستقیم به Element های موجود در DOM هست. دومین کاربرد هوک useRef ذخیره یک Mutable Value بین re-Render های مختلف کامپوننت شماست .شکل کلی استفاده از هوک useRef بصورت زیر هست :const myRef = useRef(null)حالا میتونیم بین re-Render های مختلف به این Element در DOM بصورت مستقیم دسترسی داشته باشیم.اما این تنها کاربرد هوک useRef نیست !! تو مقاله آموزش هوک useRef ری اکت بصورت کامل و تخصصی با ذکر مثال این هوک رو بررسی کردیم. پس اگه به این هوک علاقه مند هستید حتما مطالعه کنید.هوک useTransition ری اکتنهمین Hook در React ، هوک useTransition هست.اگه بخوایم یک تعریف مختصر و ساده از هوک useTransition داشته باشیم ، میتونیم به این نکته اشاره کنیم که هوک useTransition بروزرسانی State رو برای ما اولویت بندی میکنه.بطور پیشفرض تغییرات State از اولویت بالایی برخوردار هستن اما گاهی اوغات ما نیاز داریم که بروزرسانی State ما با اولویت کمتری انجام بشه.مثلا فرض کنید یک State داریم که نتیجه یک محاسبه سنگین را ذخیره میکند.چون این محاسبات سنگین هستند ، ما نیاز داریم به React بگیم که این بروزرسانی State رو بعد از تمامی بروزرسانی State ها انجام بده.استفاده از هوک useTransition در React خیلی سادست ! بصورت زیر میتونیم ازش استفاده کنیم:import { useTransition } from 'react'; const App =()=>{ const [timeUpdate, setTimeUpdate] = useState(3) const [isPending, startTransition] = useTransition() startTransition(()=>{ // بروزرسانی استیت رو اینجا میتونیم انجام بدیم ! البته با اولویت کمتر }) }هوک useTransition خیلی هوک مهم و پرکاربدیه ، پیشنهاد میکنم مقاله useTransition در React رو مطالعه کنید چون داخل این مقاله بصورت تخصصی و همراه با مثال این هوک رو بررسی کردیم.هوک useDeferredValue ری اکتدهمین هوک React ، هوک useDeferredValue هست.هوک useDeferredValue ری اکت تو نسخه 18 به React اضافه شد. در واقع useDeferredValue در React یک ابزار هست که تو مبحث بهینه سازی به ما کمک میکنه.در واقع هوک useDeferredValue به ما اجازه میده جلوی re-Render یک مقدار رو بگیریم. این واسه جاهایی که re-Render اضافی اتفاق میوفته ، خیلی کاربرد داره.نحوه استفاده از هوک useDeferredValue بصورت زیر هست:import { useDeferredValue } from 'react' const App =()=>{ const [deferrValue, setDeferrValue] = useState(&quot&quot) const deferredValue = useDeferredValue(deferrValue) return ( <h1>{deferredValue}</h1> // مقداری که میخوایم ری رندر نشه ) }تو مقاله هوک useDeferredValue در React بصورت تخصصی این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.هوک useId ری اکتآخرین هوک ری اکت در این مقاله ، هوک useId هست.هوک useID در React برای تولید شناسه های یکتا ( Unique IDs ) کاربرد داره. از این هوک در سناریو های مختلفی میتونیم استفاده کنیم.مثلا فرض کنید یجایی باید به Element خودمون یک شناسه منحصر بفرد بدیم. میتونیم بصورت زیر عمل کنیم :import { useId } from 'react' const App =()=>{ const uniqueId = useId() // تولید شناسه یکتا return ( <input type=&quottext&quot id={uniqueId} /> // استفاده از شناسه یکتا ) }تا قبل از معرفی هوک useId ری اکت باید از Math.random یا کتابخانه هایی نظیر uuid استفاده میکردیم. اما خوشبختانه از این پس نیازی به هیچ نوع کتابخانه خارجی برای تولید شناسه یکتا نداریم و خود React این موضوع رو به کمک هوک useId در React هندل میکنه.البته مهمترین مزیت این هوک ، زمانی است که ما Server Component داریم و شناسه های تولید شده بین کلاینت و سرور یکسان هستن. برای بررسی دقیقتر این موضوع پیشنهاد میکنم مقاله هوک useId در React رو مطالعه کنید که دقیقتر این موضوع رو بررسی کردیم.جمع بندیهوک ها در ری اکت باعث میشن شما قدرت بیشتری تو توسعه پروژتون داشته باشید!بی شک یکی از مهمترین آپدیت های React ، نسخه 16.8 بود که هوک های ری اکت معرفی شدن ?