useDebounce Hook

import { useState, useEffect } from "react";
import { useDebounce } from "./useDebounce";

export default function SearchComponent() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      console.log("Fetch API:", debouncedQuery);
      // fetch data di sini
    }
  }, [debouncedQuery]);

  return (
    <input
      type="text"
      placeholder="Search..."
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}