Skip to content

Instantly share code, notes, and snippets.

View PhilipWee's full-sized avatar

Philip Andrew Wee De Wang PhilipWee

17 followers · 6 following
View GitHub Profile
@PhilipWee
PhilipWee / with-generics.ts
Created August 13, 2022 02:44
function useDebounce<Func>(func: Func, delay) {
const [timer, setTimer] = useState(); //Create timer state
const debouncedFunction = ((...args) => {
const newTimer = setTimeout(() => {
func(...args);
}, delay);
clearTimeout(timer); //Cancel previous timers
setTimer(newTimer); //Save latest timer
}) as Func;
@PhilipWee
PhilipWee / with-generics.ts
Created August 13, 2022 02:40
import { useState } from "react";
function useDebounce<Func>(func: Func, delay) {
const [timer, setTimer] = useState(); //Create timer state
const debouncedFunction: Func = (...args) => {
const newTimer = setTimeout(() => {
func(...args);
}, delay);
clearTimeout(timer); //Cancel previous timers
@PhilipWee
PhilipWee / use-debounce.js
Created August 13, 2022 02:35
import { useState } from "react";
function useDebounce(func, delay) {
const [timer, setTimer] = useState(); //Create timer state
const debouncedFunction = (...args) => {
const newTimer = setTimeout(() => {
func(...args);
}, delay);
clearTimeout(timer); //Cancel previous timers
@PhilipWee
PhilipWee / popquiz.ts
Created August 13, 2022 02:26
function helloWorld() {
console.log("Hello World!");
}
const debouncedHelloWorld = useDebounce(helloWorld, 1000);
debouncedHelloWorld();
setTimeout(() => {
debouncedHelloWorld();
}, 500);
@PhilipWee
PhilipWee / popquiz.ts
Created August 13, 2022 02:25
const debouncedHelloWorld = useDebounce(helloWorld, 1000);
debouncedHelloWorld();
setTimeout(() => {
debouncedHelloWorld();
}, 500);
@PhilipWee
PhilipWee / delayed-func-call.ts
Created August 13, 2022 02:20
//@ts-nocheck (We will handle the typescript later)
function useDebounce(func, delay) {
const debouncedFunction = (...args) => {
setTimeout(() => {
func(...args)
}, delay);
};
return debouncedFunction;
}
@PhilipWee
PhilipWee / delayed-func.ts
Created August 13, 2022 02:16
//@ts-nocheck (We will handle the typescript later)
function useDebounce(func, delay) {
const debouncedFunction = (...args) => {
setTimeout(() => {
console.log("This runs after (delay) ms");
}, delay);
};
return debouncedFunction;
}
@PhilipWee
PhilipWee / simple-react-hook.ts
Created August 13, 2022 02:13
//@ts-nocheck (We will handle the typescript later)
function useDebounce(func) {
const debouncedFunction = (...args) => {}
return debouncedFunction
}
@PhilipWee
PhilipWee / simple-react-hook.ts
Created August 13, 2022 01:03
//@ts-nocheck (We will handle the typescript later)
function useDebounce(func) {
return func
}
@PhilipWee
PhilipWee / debounce-hook.ts
Last active June 19, 2024 05:54
A simple typescript hook for debouncing functions
import { useRef, useEffect } from "react";
type Timer = ReturnType<typeof setTimeout>;
type SomeFunction = (...args: any[]) => void;
/**
*
* @param func The original, non debounced function (You can pass any number of args to it)
* @param delay The delay (in ms) for the function to return
* @returns The debounced function, which will run only if the debounced function has not been called in the last (delay) ms
*/