در این مقاله قصد دارم به این موضوع رو بررسی کنم چه زمانی از react.memo استفاده کنیم و چگونه این قابلیت به پرفورمنس برنامه کمک می کنه
در فانشنال کامپونت ها در ریکت قابلیتی وجود داره به نام react.memo ، کامپونت های ریکت به این صورت عمل می کنند که وقتی در داخل کامپونت استیت تغییر می کنه موجب ری رندر شدن آن کامپونت می شه ، حالا اگر در داخل کامپونتی که استیت آن تغییر می کنه کامپونت های فرزند هم داشته باشیم کامپونت های فرزند هم ری رندر می شه
خب ، این فرایند در موارد غیر ضرروی (زمانی که پراپس های کامپونت فرزند تغییر نکنه )باعث کاهش پرفورمنس نرم افزار می شه ، این جاست که React.memo وارد عمل می شود
const myComponent = (props) => {/* render using props */};export const MemoizedComponent = React.memo(myComponent);
چه زمانی از react.memo استفاده می شه؟
زمانی ما از این قابلیت استفاده می کنیم که ، با رندر مجدد تغییری در کامپونت فرزند ایجاد نشه ، به عبارت دیگر props های ورودی کامپونت فرزند تغییر نکنه ، و با استفاده از آن از ری رندر شدن غیر ضرروری کامپونت ها جلوگیری کنیم
خب حالا که فهمیدم چه زمانی از این قابلیت استفاده کنیم بیایم در قالب یک مثال این موضوع را مورد بررسی کنیم
خب ما در کامپونت app دو تا کامپونت داریم یکی countBox که طبیعیه ، بدلیل تغییر پراپس دوباره رندر بشه و یکی کامپونت profile که بدلیل ثابت بودن مقدار پراپس آن نباید تغییر کنه
خب اگه کنسول خود را در مرورگر باز کنید می بیند با هر بار کلیک کردن بر روی کانتر و اضافه شدن عدد آن کامپونت پروفایل هم ری رندر می شود که این امر غیر ضرروریه ، در ادامه بررسی می کنیم چگونه جلوی این فرایند را بگیرم و به پرفورمنس برنامه کمک کنیم
خب اگه الان سرچ کنسول را باز کنیم می بینیم که کامپونت پروفایل ری رندر نشده!!
خب حالا بیایم مثال را یخورده تغییر بدیم
کامپونت app.js
ما در مثال قبل یک متغیر داشتیم به نام userName که نام یوزر داخل آن قرار داشت در اینجا اومدیم یک ابجکت تعریف کردیم به نام user و name را در آن قرار دادیم اگه دوباره روی دکمه AddCount کلیک کنیم می بینیم که دوباره کامپونت پروفایل ری رندر می شه !! دلیلش اینکه که ، react.memo فقط یک مقاسه سطحی بر روی مقادیر پراپس ها انجام میده ، برای حل این مشکل از آرگمان دوم React.Memo استفاده می کنیم
نحوه استفاده از آن به این شکل هست
ما در آرگمان دوم react.memo مقایسه کردیم اگر مقادیر پراپس قبلی با مقدار فعلی برابر بود رندر نشود در غیر این صورت رندر شود
در اخر باید این نکته را هم متذکر شده که همیشه نباید از این قابلیت استفاده کرد چون ممکن است نتیجه معکوس باشد
این قابلیت فقط در Function component قابل استفاده و در class component ها باید از pure component ها استفاده کرد
