پیاده‌سازی تکنیک Throttle توی ری‌اکت

برای این کار ابتدا یک فایل می‌سازیم به اسم useThrottle.ts و توی اون یک هوک خالی رو پیاده‌سازی می‌کنیم:

// useThrottle.ts

export function useThrottle() {

}

توی این هوک می‌بایست یک تابع درست کنیم که قراره ریترن بشه و مورد استفاده قرار بگیره:

export function useThrottle() {
  const throttle = () => {
    // ...
  }

  return throttle;
}

همونطور که توی کامپوننت App.tsx دیدیم، تابع throttle یک کال‌بک قبول کرده. پس اون رو به این شکل تغییر می‌دیم:

export function useThrottle() {
  const throttle = (<<callback>>) => {
    return (...args) => callback(...args);
  }

  return throttle;
}

حالا تابع throttle یک کال‌بک می‌گیره و یک تابع دیگه رو برمی‌گردونه. در واقع throttle یک HOF هست که یک تابع رو می‌گیره و نسخهٔ بهینه‌شدهٔ اون رو تحویل میده.

تا الان هنوز کدی برای عملیات به تأخیر انداختن ننوشتیم. باید یک سری شرط و شروط رو بررسی کنیم. ابتدا یک ref می‌سازیم:

import { useRef } from "react";

export function useThrottle() {
  const lastCall = useRef(0);

  const throttle = (callback) => {
    // ...
  }

  return throttle;
}

توی خط ۴ یک ref ساختیم که مسئول نگهداری زمان آخرین اجرای کال‌بک هست.

توی App.tsx دیدیم که هوک ما یک ورودی می‌گرفت برای مشخص کردن بازهٔ زمانی مد نظر. پس اون رو پیاده‌سازی می‌کنیم:

import { useRef } from "react";

export function useThrottle(<<duration>>) {
  // ...
}

حالا باید یک مقایسه انجام بدیم. باید مقایسه کنیم که آیا از آخرین زمانی که کال‌بک اجرا میشه، زمانی به اندازهٔ duration (که توی مثال ما که ۱۰۰۰ میلی‌ثانیه تعیین کردیم) گذشته یا نه. این مقایسه رو توی خط ۸ نوشتیم:

import { useRef } from "react";

export function useThrottle(duration) {
  const lastCall = useRef(0);

  const throttle = (callback) => {
    return (...args) => {
      if (lastCall.current + duration < Date.now()) {
        lastCall.current = Date.now();
        callback(...args);
      }
    };
  }

  return throttle;
}

اگه زمانی به اندازهٔ duration گذشته باشه، شرط برقرار میشه و کال‌بک اجرا میشه. همچنین می‌بایست آخرین زمان اجرا رو بروز کنیم که این کار رو توی خط ۹ انجام دادیم.

خب هوک ما تقریباً آماده هست و می‌تونه استفاده بشه. اما قبل از اون بهتره یک‌سری بهبودهایی توی اون انجام بدیم. از اونجایی که throttle یک تابع هست که توی برنامه قراره استفاده بشه، خوبه که اون رو محصور کنیم به useCallback تا از رندرهای ناخواسته جلوگیری کنیم:

import { <<useCallback>>, useRef } from "react";

export function useThrottle(duration) {
  const lastCall = useRef(0);

  const throttle = <<useCallback>>(
    (callback) => {
      return (...args) => {
        if (lastCall.current + duration < Date.now()) {
          lastCall.current = Date.now();
          callback(...args);
        }
      };
    },
    [duration]
  );

  return throttle;
}

خب دیدیم که چقدر راحت تونستیم این هوک رو پیاده‌سازی کنیم. نسخهٔ دمو رو می‌تونید از اینجا ببنید.

امیدوارم از نکاتی که بررسی کردیم استفاده کرده باشین. توی قسمت بعدی تکنیک Debounce رو پیاده‌سازی می‌کنیم. روزتون خوش 😉🌹