خیلی مختصر و ساده راجب تفاوت useCallback و useMemo

سلام و امیدوارم که حالتون خوب باشه. چند وقته میبینم بچه هایی که تازه دارن ری اکت کار میکنن و یا حتی در برخی از موارد افراد یکم با سابقه تر این دوتا هوک ری اکت رو با هم قاطی میکنن و دقیق نمیدونن مرز این دو هوک چیه. خواستم اینجا یه توضیحی رابجب این دو هوک بدم.

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

(این مثال هارو من همینجوری اینجا مینویسم برای همین اگه یه وقت تصمیم گرفتید که ازشون استفاده کنید و ارور خورد ببخشید دیگه :)‌ )

import React,{useState} from 'react'

const DisplayResult = ({result}) => <p>{result}</p>

const test = props => {

         const func = ()=> { ///  some complicate operation }
         const result = func();

          let [state,setState] = useState(0)

          return <div> <DisplayResult result={result} /> <button ={()=>setState(state + 1 )} 
                            /> <p>{state}</> </div>

}

تو این مثال شما هر باری که اون باتن رو فشار بدید این کامپوننت آپدیت میشه و دوباره رندر میشه و با هربار رندر شدن مجددا اون تابع سنگینمون ران میشه و خب این اصلا خوب نیست.

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

useMemo:

هوک اولی که راجبش صحبت میکنم useMemo عه.به صورت ساده این هوک یه تابع به عنوان آرگومان اول و یک آرایه از دیپندنسی یا وابستگی به عنوان آرگومان دوم میگیره. اون تابع رو اجرا میکنه برامون و جوابشو بهمون میده و فقط در صورتی که اون وابستگی تغییر بکنه این تابع رو دوباره ران میکنه. الان مثال بالا رو با کمک useMemo مینویسیم ببینیم چجور میشه:

import React,{useState,useMemo} from 'react'

const DisplayResult = ({result}) => <p>{result}</p>

const test = props => {

         const func = ()=> { ///  some complicate operation }
          const [state,setState] = useState(0)
          const result = useMemo(func,[state])

          return <div> <DisplayResult result={result} /> <button ={()=>setState(state + 1 )} 
                            /> <p>{state}</> </div>

}

خب من الان با استفاده از useMemo و پاس دادن اون تابع سنگینمون بهش کاری کردم که این تابع هر بار ران نشه. اما من تو کد بالا یع اشتباهی کردم که باعث شده وضعیتم با کد قبلی فرقی نکنه. ببینید میتونید بفمید چرا؟

خب علتش اینه که من اومدم به عنوان آرگومان دوم به useMemo اون state رو پاس دادم و با هر بار تغییر مقدار اون state این تابع دوباره ران میشه و عملا نصبت به قبل تغییر ایجاد نشد. برای اینکه این تابع یک بار و فقط یک بار ران بشه من باید اون خط برنامه رو به شکل زیر ویرایشش کنم

          const result = useMemo(func,[])

خب الان من یه آرایه خالی به عنوان وابستگی به این تابع پاس دادم یعنی این هوک هیچ وابستگی نداره و باعث میشه فقط و فقط یکبار ران بشه و خب همه چی خوب بشه :)

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

useCallback

خب حالا که به صورت ساده و ابتدایی با این هوک آشنا شدین بریم ببینیم که هوک دوم چیه.

بچه ها useCallbak هم مثل همین useMemo کار میکنه فقط تنها فرقش اینه که useCallback فانکشنی که بهش به عنوان آرگومان میدیم رو ران نمیکنه و خود اون فانکشن رو برمیگردونه. و ما باید خودمون اونو ران کنیم. اگه بخوام مثال بالارو با useCallback بنویسم اینجوری میشه.

import React,{useState,useCallback} from 'react'

const DisplayResult = ({result}) => <p>{result}</p>

const test = props => {
          const [state,setState] = useState(0)
          const func = useCallback(()=> { ///  some complicate operation },[])

          return <div> <DisplayResult result={func()} /> <button ={()=>setState(state + 1 )} 
                            /> <p>{state}</> </div>

}

خب این یه توضیح خیلی ساده بود ازین دو هوک بیشتر برای اینکه جا بیوفته فرق این دوتا هوک باهم چیه اما راستشو بخواید یکم فرقشون بیشتر ازین حرفاس ولی این مثال کمک میکنه بفهمید چجور باید ازین هوک ها استفاده کنید . امیدوارم مفید بوده باشه .