خب بیاین اول ببینیم lodash چیه؟ lodash یک JavaScript utility library ه که اگه سری به سایت lodash بزنید متوجه میشید منظورم چیه، lodash مجموعه بهینه و کاملی از متد ها رو در اختیارمون قرار میدهد که میتونیم از اونها بنا به نیازمون توی پروژه هامون استفاده کنیم که اینجا میخوایم درباره متد debounce و نحوه استفاده ازش توی پروژه های ReactJS صحبت کنیم.
حالا بریم سراغ سوال اصلی مون! debounce چیه؟!
لابد می دونید که دارین این مقاله رو میخونید، متد debounce برای جلوگیری از call شدن مجدد یه تابع تا یه زمان مشخص بعد اخرین callشدنش استفاده میشه. تا به حال شده یه سرچ باکس پیاده کنید و بخواید ریکوستتون رو به جای اینکه با تایپ هر یک حرف بفرستید، صبر کنید تا کاربر متن مورد نظرش رو تایپ کنه و بعد ارسال کنید؟ اگه تو ویرگول تجربه ی نوشتن داشته باشید حین نوشتن، بالای صفحه کنار لوگوی ویرگول عبارت «در حال ذخیره...» نوشته شده و وقتی تایپ رو متوقف میکنید به «ذخیره شد» تغییر میکنه که دقیقا داره همین کاری که چند خط بالاتر گفتم رو انجام میده.
بیاید ببینیم ساختار این متد به چه شکله؟
سایت lodash ساختار این متد رو به این شکل معرفی کرده:
_.debounce(func, [wait=0], [options={}])
بیاین اول یه چیزی بهتون بگم! شاید فکر کنید این «_» چیه؟ معمولا موقع اضافه کردن lodash به پروژه به این شکل importش میکنن:
var _ = require('lodash');
پس اون «_» اول خود lodashه که اومده متد debounceش رو call کرده! البته ما به این شکل اون رو import نمی کنیم!
خب دور نشیم از بحث! همونطور که توی ساختار متد debounce مشاهده می کنین اولین پارامتر یه تابع‌ه که همون تابع اصلی‌مونه که میخوایم از کال شدنش توی یه بازه مشخص جلوگیری کنیم، پارامتر دوم wait timeه که مقدار پیش فرضش 0 ه و واحدش میلی ثانیه‌س و بر اساس نیازمون توی پروژه میتونیم اون رو هر مقداری بذاریم و پارامتر سوم یه سری optionهایی هستن که میخوایم اعمال کنیم. توجه کنید که دوتا آرگومان آخر اختیاری ان.
سه تا option رو میتونیم روی این متد اعمال کنیم:
leading(boolean)trailing(boolean)maxWait(number)که واسه جزییات بیشتر ارجاعتون میدم به سایت lodash :)
نحوه استفاده از debounce :
بیاید همون سرچ باکس‌ی که بالا ازش حرف زدیم رو پیاده کنیم. نمونه ای که بدون استفاده از debounce خواهیم داشت به این شکله:
اگه دقت کنید با هر تغییر مقدار inputمون یه بار تابع handleChange صدا زده میشه و یه ریکوست فرستاده میشه، حالا اگه بخوایم این مورد رو به صورت بهینه تر با deblounce پیاده کنیم نتیجه به شکل زیر میشه:
به همین سادگی تونستیم کدمون رو تا حد زیادی بهینه کنیم و از ریکوست ها و رندرهای اضافی جلوگیری کنیم. نکته ای که اینجا لازمه حواستون بهش باشه قرار دادن debounce داخل useCallback یا ترجیحا useMemo ه چرا که از ساخت مجدد debounce جلوگیری میکنه.
