useDebouncedValue

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

export default function App() {
  const [value, setValue] = useState("");
  const [debouncedValue, immediatelyUpdateDebouncedValue] = useDebouncedValue(
    value,
    500
  );
  // use `immediatelyUpdateDebouncedValue` if you want to update `debouncedValue` immediately

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

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

export default function SubmitSearch() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useDebouncedValue(query, 400, {
    initializeWithNull: true,
  });

  return (
    <div>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <button onClick={() => setDebouncedQuery(query)}>Search now</button>
      <div>Searching for: {debouncedQuery ?? "nothing yet"}</div>
    </div>
  );
}