useDebounce

import { useState } from "react";
import { useDebounce } from "rooks";

export default function App() {
  const [value, setValue] = useState("");
  const setValueDebounced = useDebounce(setValue, 500);

  return (
    <div>
      <input
        onChange={(e) => setValueDebounced(e.target.value)}
        placeholder="Please type here"
      />
      <div>{value}</div>
    </div>
  );
}

import { useState } from "react";
import { useDebounce } from "rooks";

export default function LeadingSearch() {
  const [logs, setLogs] = useState([]);
  const logSearch = useDebounce(
    (value) => {
      setLogs((current) => [...current, `search:${value}`]);
    },
    500,
    { leading: true }
  );

  return (
    <div>
      <button onClick={() => logSearch("react hooks")}>Run search</button>
      <pre>{JSON.stringify(logs, null, 2)}</pre>
    </div>
  );
}