Some helpful functions for React & iterators

getWindows_continuous.ts

/** Continuous windows as in carousel */
export const getWindows = <T>(data: T[], size = 5) => ({
  acc: 0,
  *[Symbol.iterator]() {
    const length = data.length;
    const array: T[] = [];
    for (let i = 0; i < size; ++i) {
      array.push(data[this.acc + i >= length ? this.acc + i - length : this.acc + i]);
    }
    if (this.acc >= length) this.acc = 1;
    else ++this.acc;
    yield array;
  },
});

getWindows_nonOverlapping.ts

/** Non overlapping windows */
export const getWindows = (length: number, size = 3) => ({
  acc: 0,
  *[Symbol.iterator]() {
    const array: number[] = [];
    for (let i = 0; i < size; ++this.acc, ++i) {
      if (this.acc > length) this.acc = 0;
      array.push(this.acc);
    }
    yield array;
  },
});

useDebounce.ts

import { useEffect, useRef, useState } from "react";

const useDebounce = <T>(value: T, delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

const useDebounce = (func: Function, delay = 500) => {
  const timer = useRef<number>();

  return () => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(func, delay);
  };
};

export default useDebounce;

useThrottle.ts

import { useEffect, useRef, useState } from "react";

const useThrottle = <T>(value: T, interval = 500): T => {
  const [throttledValue, setThrottledValue] = useState<T>(value);
  const lastExecuted = useRef<number>(Date.now());

  useEffect(() => {
    if (Date.now() >= lastExecuted.current + interval) {
      lastExecuted.current = Date.now();
      setThrottledValue(value);
    } else {
      const timerId = setTimeout(() => {
        lastExecuted.current = Date.now();
        setThrottledValue(value);
      }, interval);

      return () => clearTimeout(timerId);
    }
  }, [value, interval]);

  return throttledValue;
};

export default useThrottle;