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

حالا باید تکنیک debounce رو پیاده‌سازی کنیم که توی جاوااسکریپت با استفاده از setTimeout معمولاً انجام میشه. با استفاده از این تابع می‌تونیم عملیات مد نظرمون رو به تأخیر بندازیم؛ مثل خط ۴ تا ۶ کد زیر:

export function useDebounce(delay) {
  const debounce = (callback) => {
    return (...args) => {
      <<setTimeout(() => {>>
        callback(...args);
      }, <<delay>>)
    }
  }

  return debounce;
}

Debounce ما هنوز کامل نیست. هر بار که کد بالا اجرا میشه یک setTimeout جدید ساخته میشه و در نتیجهٔ اون setTimeout اولی هم غیر قابل دسترس میشه. در صورتی که ما باید فقط یک setTimeout داشته باشیم و بتونیم اون رو مدیریت کنیم (یعنی ابتدا باید اون رو از بین ببریم تا بتونیم یکی دیگه بسازیم.) این کار رو با استفاده از useRef ری‌اکت انجام می‌دیم:

export function useDebounce(delay) {
  const timeoutId = <<useRef();>>

  const debounce = (callback) => {
    return (...args) => {
      <<timeoutId.current>> = setTimeout(() => {
        callback(...args);
      }, delay);
    }
  }

  return debounce;
}

توی خط ۲ کد بالا یک Ref ساختیم توی خط ۶ به اون مقدار دادیم. هر تابع setTimeout یک شناسه منحصر به فرد داره. ما برای از بین بردن اون به این شناسه احتیاج داریم. برای همین از useRef استفاده کردیم و مقدار اون رو برابر با شناسهٔ setTimeout قرار دادیم.

حالا هر بار می‌خواد یک setTimeout جدید ساخته بشه، بعد می‌بایست کاری کنیم که setTimeout قبلی از بین بره، که این کار رو توی خط ۶ انجام دادیم:

export function useDebounce(delay) {
  const timeoutId = useRef();

  const debounce = (callback) => {
    return (...args) => {
      <<clearTimeout(timeoutId.current); >>
      timeoutId.current = setTimeout(() => {
        callback(...args);
      }, delay);
    }
  }

  return debounce;
}

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

export function useDebounce(delay) {
  const timeoutId = useRef();

  const debounce = <<useCallback(>>
    (callback) => {
      return (...args) => {
        clearTimeout(timeoutId.current);

        timeoutId.current = setTimeout(() => {
          callback(...args);
        }, delay);
      };
    },
    [delay]
  );

  return debounce;
}

مرحلهٔ دوم اینه که کاری کنیم وقتی کامپوننت یا هوک Unmount میشه، setTimeout مد نظرمون رو هم پاک کنیم تا Memory Leak نداشته باشیم. این کار رو با استفاده از useEffect انجام می‌دیم:

export function useDebounce(delay) {
  const timeoutId = useRef();

  const debounce = useCallback(
    (callback) => {
      return (...args) => {
        clearTimeout(timeoutId.current);

        timeoutId.current = setTimeout(() => {
          callback(...args);
        }, delay);
      };
    },
    [delay]
  );

  <<useEffect(() => {>>
    return () => {
      if (timeoutId.current) {
        clearTimeout(timeoutId.current);
      }
    };
  }, []);

  return debounce;
}

خب هوک بالا آماده هست که توی برنامه مورد استفاده قرار بگیره. یک نسخه دمو از هوک بالا ساختم که اون رو می‌تونین از اینجا ببینید.

امیدوارم از نکاتی که بررسی کردیم استفاده کرده باشین. تا قسمت بعدی خدانگهدار 😉👋