ویرگول
ورودثبت نام
Amin Ataee
Amin Ataee
خواندن ۱ دقیقه·۴ سال پیش

صفر تا صد React Hooks (قسمت ششم useMemo)

Memoization is an optimization technique which passes a complex function to be memoized. In memoization, the result is “remembered” when the same parameters are passed-in subsequently.




در این قسمت هوک useMemo را از طریق یک مثال خیلی ساده و کاربردی بررسی میکنیم.

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

کد زیر یک todo بسیار ساده است . به این شکل که یک اینپوت قرار دارد که کاربر داخل آن تایپ میکند و مقادیر ورودی در پایین آن ، لیست میشود. به کد آن توجه کنید :

همانطور که در تصویر میبینید در کامپوننت list یک فیلتر وجود دارد که تنها تسک هایی که done شده است را نمایش می دهد. یک مشکل در کد بالا وجود دارد. درصورتی که در اینپوت تایپ کنیم فیلتر داخل کامپوننت list دوباره اجرا میشود. برای اطمینان از این اتفاق یک console داخل filter قرار میدهیم :

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

با فشردن هر دکمه یک بار فیلتر اجرا میشود. برای جلوگیری از این اتفاق باید از هوک useMemo استفاده کنیم. به صورت زیر :


ممنون از این که وقت گذاشتید.. لطفا نظراتتون را در کامنت ها ارسال کنید.. با تشکر

javascriptreactusememoری اکتجاوااسکریپت
Software engineer
شاید از این پست‌ها خوشتان بیاید