Skip to content

Instantly share code, notes, and snippets.

@Gerst20051
Last active December 18, 2024 20:22
Show Gist options
  • Save Gerst20051/c6bdcfdfdb798c5c01a3740997b300c1 to your computer and use it in GitHub Desktop.
Save Gerst20051/c6bdcfdfdb798c5c01a3740997b300c1 to your computer and use it in GitHub Desktop.
React Debounce Hook App
import React, { useState } from 'react'
import './DebounceApp.css'
function debounce(fn, delay) {
let handlerId
return (...args) => {
clearTimeout(handler)
handlerId = window.setTimeout(() => {
fn(...args)
}, delay)
}
}
function DebounceHookApp() {
const [inputValue, setInputValue] = useState<string>('')
return (
<div className="app">
<input type="text" onChange={debounce((e) => setInputValue(e.target.value), 300)} />
<div>The result is <span id="inputValue">{inputValue}</span></div>
</div>
)
}
export default DebounceHookApp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment