هوک ها در ری اکت ! بررسی تخصصی 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 هست )

مقدار setState یک تابع هست که به ما امکان بروزرسانی مقدار فعلی name رو میده. بطور مثال قصد داریم نام ذخیره شده رو از FrontEndi به Akbar تغییر بدیم . برای اینکار باید بصورت زیر عمل کنیم :

				
					setState('Akbar') // تغییر مقدار ذخیره شده به اکبر

اگه دوست دارید 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(()=>{
 // انجام یه کاری
 axios.get('mySite.com/userData')
}, [name]); // وابستگی - یعنی چه زمانی اون کار اتفاق بیوفته

تو مثال بالا گفتیم هر زمان وابستگی ما ( name ) تغییر مقدار داشت ، کد خط 3 رو مجدد اجرا کن.

این یک مثال ساده از هوک 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 منتقل کنیم.

اینجا سعی کردیم خیلی خلاصه هوک useContext رو توضیح بدیم اما تو مقاله آموزش هوک useContext ری اکت خیلی دقیقتر و با جزئیات بیشتری به این هوک پرداختیم.

هوک useLayoutEffect ری اکت

چهارمین هوک در React ، هوک useLayoutEffect هست.

هوک useLayoutEffect ری اکت خیلی شبیه هوک useEffect هست اما باهمدیگه تفاوت هایی دارن.

شکل کلی استفاده از هوک useLayoutEffect ری اکت بصورت زیر هست :

				
					useLayoutEffect(() => {
//do something
}, [arrayDependency]) // Dependencies

با نگاه کردن به ساختار استفاده از هوک useLayoutEffect شاید این سوال براتون پیش بیاد که تفاوت هوک useLayoutEffect و هوک useEffect چیست ؟

تفاوت هوک useEffect و useLayoutEffect

بطور خلاصه و ساده اگه بخوایم تفاوت هوک useLayoutEffect و useEffect رو بگیم ، میتونیم به ای نکته اشاره کنیم که :

تابع بروزرسانی useEffect بعد از Render شدن کامپوننت در DOM اجرا میشه. اما تابع بروزرسانی useLayoutEffect قبل از Render کامپوننت در DOM اجرا میشه.

گاهی اوغات نمیخوایم کاربر تغییر DOM رو ببینه ( بروز شدن DOM و تغییر صفحه ) در اینجا میتونیم از هوک useLayoutEffect ری اکت استفاده کنیم.

هوک useReducer ری اکت

پنجمین هوک از هوک های ری اکت ، هوک useReducer هست.

هوک useReducer تا حدود زیادی شبیه هوک useState هست اما تفاوت هایی باهمدیگه دارن. بطور کل از هوک useReducer برای ذخیره و مدیریت State هایی که پیچیدگی بیشتری دارن و بروزرسانی State باتوجه به مقدار قبلی State ، استفاده میکنیم.

شکل کلی استفاده از هوک useReducer بصورت زیر هست :

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

تو تیکه کد بالا از count برای دسترسی به مقدار ذخیره شده و از dispatch برای بروزرسانی اون مقدار استفاده میکنیم. همچنین initialState یک مقدار اولیه برای State ما و reducer تابعی هست که عمل بروزرسانی State مارو هندل میکنه.

تو مقاله آموزش هوک useReducer ری اکت بصورت کامل و با جزئیات خیلی بیشتری این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.

هوک useCallback ری اکت

ششمین Hook ری اکت ، هوک useCallback هست.

هوک useCallback ری اکت توابع شمارو کش میکنه و در re-Render های مختلف کامپوننت ، نتیجه همون تابع کش شده رو استفاده میکنه و دیگه اون تابع رو اجرا نمیکنه ( تا زمانیکه آرگومان های اون تابع تغییر کنن )

شکل کلی استفاده از هوک useCallback بصورت زیر هست :

				
					const x = useCallback(callback, dependencies)

تو تیکه کد بالا از هوک useCallback استفاده کردیم. تو بخش Callback باید تابع خودتون که میخواید کش بشه رو قرار بدید و در بخش dependencies باید مواردی رو ذکر کنید که درصورت تغییرشون ، میخواید تابع مجدد محاسبه بشه.

در نهایت یک تابع memo شده Return میشه و در X ذخیره میشه.

تو مقاله آموزش هوک useCallback ری اکت بصورت تخصصی و با جرئیات خیلی بیشتری این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.

هوک useMemo ری اکت

هفتمین Hook در React ، هوک useMemo هست.

هوک useMemo در واقع یک تابع هست که یک مقدار کش شده برای ما Return میکنه.( Memoized Value )

هوک useMemo خیلی شبیه هوک useCallback هست اما باهمدیگه متفاوت هستن.

تفاوت هوک useMemo و useCallback

هوک useMemo یک مقدار برای ما کش میکنه ( memo میکنه ) اما هوک useCallback یک تابع برای ما کش میکنه ( memo میکنه )

نحوه استفاده از هوک useMemo در React بصورت زیر هست :

				
					const cachedValue = useMemo(function,dependencies)

تو بخش function باید تابع مدنظر خودمون رو بنویسیم که میخوایم نتیجه این تابع کش بشه. تو بخش dependencies مواردی رو باید ذکر کنیم که میخوایم درصورت تغییر این مقادیر ، مجدد تابع useMemo اجرا بشه و مقدار جدید رو کش کنه.

در نهایت مقدار کش شده داخل متغیر cashedValue قرار میگیره و میتونیم ازش استفاده کنیم.

از هوک useMemo برای بهبود Performance و بهینه سازی اپیکیشن های ری اکتی میتونیم استفاده کنیم. تو مقاله آموزش هوک useMemo ری اکت بصورت دقیقتر و با جزئیات و مثال به بررسی این هوک خفن پرداختیم.

هوک useRef ری اکت

هشتمین هوک در ری اکت ، هوک useRef هست.

کاربرد اصلی هوک useRef ری اکت ، دسترسی مستقیم به Element های موجود در DOM هست. دومین کاربرد هوک useRef ذخیره یک Mutable Value بین re-Render های مختلف کامپوننت شماست .

شکل کلی استفاده از هوک useRef بصورت زیر هست :

				
					const myRef = useRef(null)

حالا میتونیم بین re-Render های مختلف به این Element در DOM بصورت مستقیم دسترسی داشته باشیم. فقط کافیه این ref رو به یک Element اختصاص بدیم :

				
					      <Input ref={myRef}  />

در واقع میتونیم به این Input در DOM بصورت مستقیم دسترسی داشته باشیم.

اما این تنها کاربرد هوک useRef نیست !! تو مقاله آموزش هوک useRef ری اکت بصورت کامل و تخصصی با ذکر مثال این هوک رو بررسی کردیم. پس اگه به این هوک علاقه مند هستید حتما مطالعه کنید.

هوک useTransition ری اکت

نهمین Hook در React ، هوک useTransition هست.

اگه بخوایم یک تعریف مختصر و ساده از هوک useTransition داشته باشیم ، میتونیم به این نکته اشاره کنیم که هوک useTransition بروزرسانی State رو برای ما اولویت بندی میکنه.

بطور پیشفرض تغییرات State از اولویت بالایی برخوردار هستن اما گاهی اوغات ما نیاز داریم که بروزرسانی State ما با اولویت کمتری انجام بشه.

مثلا فرض کنید یک State داریم که نتیجه یک محاسبه سنگین را ذخیره میکند.

چون این محاسبات سنگین هستند ، ما نیاز داریم به React بگیم که این بروزرسانی State رو بعد از تمامی بروزرسانی State ها انجام بده.

در کل میخوایم به React بگیم این setState رو با اولویت کمتری برای ما انجام بده.

برای چنین نوع استفاده ای میتونیم از هوک useTransition ری اکت استفاده کنیم.

استفاده از هوک useTransition در React خیلی سادست ! بصورت زیر میتونیم ازش استفاده کنیم:

				
					import { useTransition } from 'react';

const App =()=>{
  const [timeUpdate, setTimeUpdate] = useState(3)
  const [isPending, startTransition] = useTransition()

  startTransition(()=>{
     // بروزرسانی استیت رو اینجا میتونیم انجام بدیم ! البته با اولویت کمتر
    })

  }

تفاوت useTransition و useState

بروزرسانی State هایی که با useState انجام میدیم اولویت خیلی بالایی دارن اما بروزرسانی State هایی که با useTransition انجام میدیم اولویت کمتری دارن و دیرتر انجام میشن.

هوک useTransition خیلی هوک مهم و پرکاربدیه ، پیشنهاد میکنم مقاله useTransition در React رو مطالعه کنید چون داخل این مقاله بصورت تخصصی و همراه با مثال این هوک رو بررسی کردیم.

هوک useDeferredValue ری اکت

دهمین هوک React ، هوک useDeferredValue هست.

این هوک تو نسخه 18 به React اضافه شد. در واقع این هوک در React یک ابزار هست که تو مبحث بهینه سازی به ما کمک میکنه.

این هوک به ما اجازه میده جلوی re-Render اضافی یک مقدار رو بگیریم. این واسه جاهایی که re-Render اضافی اتفاق میوفته ، خیلی کاربرد داره.

نحوه استفاده از این هوک بصورت زیر هست :

				
					
const App =()=>{
const [deferrValue, setDeferrValue] = useState("")
const deferredValue = useDeferredValue(deferrValue)

return (
  <h1>{deferredValue}</h1> // مقداری که میخوایم ری رندر نشه
  )
}

برای اینکه از re-Render یک Value جلوگیری کنیم فقط کافیه اون مقدار رو به این هوک پاس بدیم. تو مثال بالا ما State خودمون رو به این هوک دادیم.

در واقع این هوک خیلی جاها میتونه کاربردی باشه.

سنارویی رو در نظر بگیرید که یک Input داریم که کار جستجو رو برای ما انجام میده. با هر تایپ کاراکتر در این Input ، رندر مجدد کامپوننت صورت میگیره و این اصلا خوب نیست.

به کمک این هوک میتونیم جلوی این re-Render اضافی پس از هر بار تایپ کردن رو بگیریم :

				
					const Search =()=> {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const deferredSearchQuery = useDeferredValue(searchQuery);

  useEffect(() => {
    // Fetch search results using deferredSearchQuery
    // Update setSearchResults with the new results
  }, [deferredSearchQuery]);

  const handleSearchInputChange = (event) => {
    setSearchQuery(event.target.value);
  };

  return (
    <div>
      <input type="text" value={searchQuery} onChange={handleSearchInputChange} />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

تو مقاله هوک useDeferredValue در React بصورت تخصصی این هوک رو بررسی کردیم. پیشنهاد میکنم این مقاله رو مطالعه کنید.

هوک useId ری اکت

آخرین هوک ری اکت در این مقاله ، هوک useId هست.

هوک useID در React برای تولید شناسه های یکتا ( Unique IDs ) کاربرد داره. از این هوک در سناریو های مختلفی میتونیم استفاده کنیم.

مثلا فرض کنید یجایی باید به Element خودمون یک شناسه منحصر بفرد بدیم. میتونیم بصورت زیر عمل کنیم :

				
					import { useId } from 'react'

const App =()=>{
const uniqueId = useId() // تولید شناسه یکتا

return (
  <input type="text" id={uniqueId} /> // استفاده از شناسه یکتا
  )
}

تا قبل از معرفی هوک useId ری اکت باید از Math.random یا کتابخانه هایی نظیر uuid استفاده میکردیم. اما خوشبختانه از این پس نیازی به هیچ نوع کتابخانه خارجی برای تولید شناسه یکتا نداریم و خود React این موضوع رو به کمک هوک useId در React هندل میکنه.

البته مهمترین مزیت این هوک ، زمانی است که ما Server Component داریم و شناسه های تولید شده بین کلاینت و سرور یکسان هستن. برای بررسی دقیقتر این موضوع پیشنهاد میکنم مقاله هوک useId در React رو مطالعه کنید که دقیقتر این موضوع رو بررسی کردیم.

جمع بندی

هوک ها در ری اکت باعث میشن شما قدرت بیشتری تو توسعه پروژتون داشته باشید!

بی شک یکی از مهمترین آپدیت های React ، نسخه 16.8 بود که هوک های ری اکت معرفی شدن 🙂

پیشنهاد میکنم حتما مقالات مرتبط با این Hook ها رو رو مطالعه کنید تا با درک صحیح و عمیق ازشون بتونید پروژه های خودتون رو بهتر و بهتر کنید 🙂

میشه از هوک ها در Class Component ها استفاده کرد ؟

خیر !

از هوک های ری اکت فقط در Functional Component ها میتونیم استفاده کنیم.

از Hook ری اکت نمیشه در Class Component ها استفاده ای کرد.

میشه هوک اختصاصی با توجه به نیاز خودمون بسازیم ؟

بله 🙂

به کمک Custom Hook ها میتونید هوک اختصاصی در با توجه به نیاز خودتون بسازید و ازشون استفاده کنید.

برای این مورد پیشنهاد میکنم مقاله Custom Hook ری اکت رو مطالعه کنید.

وبلاگ