import { useDebounce } from "nano-usedebounce";

function SearchComponent() {
  const debouncedSearch = useDebounce((searchTerm: string) => {
    // This will only be called after 500ms of inactivity
    // Do something with the search term
    // e.g. call an API to search your database
    console.log("debouncedSearch", searchTerm);
  }, 500);

  // Handle the input change on every key press
  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    debouncedSearch(e.target.value);
  }

  return <input type="text" placeholder="Search..." onChange={handleSearch} />;
}

import { useState, useEffect } from "react";
import { useDebounce } from "nano-usedebounce";

const DEBOUNCE_DELAY = 300;

function UserSearch() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  const debouncedSearch = useDebounce(async (term: string) => {
    if (!term.trim()) {
      setUsers([]);
      return;
    }

    // This API call will only be executed after 300ms of inactivity
    try {
      const response = await fetch(
        `/api/users?search=${encodeURIComponent(term)}`
      );
      const data = await response.json();
      setUsers(data);
    } catch (error) {
      console.error("Search failed:", error);
    } finally {
      setLoading(false);
    }
  }, DEBOUNCE_DELAY);

  // Handle the input change on every key press
  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    // Set loading outside the debounce callback
    // to show it right away
    setLoading(true);
    debouncedSearch(e.target.value);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleSearch}
        placeholder="Search users..."
      />
      {loading && <div>Searching...</div>}
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

import { useDebounce } from "nano-usedebounce";

// The delay to debounce
const DEBOUNCE_DELAY = 1000;

function FilterComponent() {
  const debouncedFilter = useDebounce(
    (category: string, price: number, inStock: boolean) => {
      // This function will only execute after 1000ms of inactivity
      console.log("Applying filters:", { category, price, inStock });
      // Apply filters to your data
    },
    DEBOUNCE_DELAY
  );

  const handleFilterChange = (
    category: string,
    price: number,
    inStock: boolean
  ) => {
    debouncedFilter(category, price, inStock);
  };

  return <div>{/* Your filter UI components */}</div>;
}