PhilipWee

export function Component() {
  const meaningOfLife = getTheAnswerToLife(allUniverseData);

  return <div>{meaningOfLife}</div>;
}

PhilipWee

const timer = useRef<Timer>();

PhilipWee

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

PhilipWee

//TODO: Update this with clickthrough statistics from this article to FireJet Website

PhilipWee

const debouncedFunction = (...args) => {return args}

const finalArgs = debouncedFunction("arg1","arg2","arg3")

//finalArgs === ["arg1","arg2","arg3"]

PhilipWee

const _changeText(newText:string) {
    setText(newText)
  }

const changeText = useDebounce(_changeText, 1000)

PhilipWee

.
.
.
function useDebounce<Func extends SomeFunction>(func: Func, delay: number) {
.
.
.

PhilipWee

import { useState } from "react";

type SomeFunction = (...args: any[]) => void;
type Timer = ReturnType<typeof setTimeout>;

function useDebounce<Func extends SomeFunction>(func: Func, delay) {
  const [timer, setTimer] = useState<Timer>(); //Create timer state

  const debouncedFunction = ((...args) => {
    const newTimer = setTimeout(() => {

PhilipWee

type Timer = ReturnType<typeof setTimeout>;

PhilipWee

import { useState } from "react";

type SomeFunction = (...args: any[]) => void;

function useDebounce<Func extends SomeFunction>(func: Func, delay) {
  const [timer, setTimer] = useState(); //Create timer state

  const debouncedFunction = ((...args) => {
    const newTimer = setTimeout(() => {
      func(...args);