Debounce on React

debounce.md

Basic hook

function useDebounce(state, timeout){
  const [current, setState] = useState(state)

  useEffect(() => {
    const run = setTimeout(() => {
      setState(state)
    }, timeout)
    return () => clearTimeout(run)
  }, [state, timeout])

  return current
}

Simple usage

export default function App() {

  const [title, setTitle] = useState("")
  const lazyTitle = useDebounce(title, 500)

  return (
    <div className="App">
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <h1>{lazyTitle}</h1>
    </div>
  );
}