// src/App.jsx
import { useState, useEffect } from "react";

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timeoutId);
  }, [value, delay]);

  return debouncedValue;
}

function SearchBox() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 400);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type to search..." />
      <p>Live value: {query}</p>
      <p>Debounced value (400ms after you stop typing): {debouncedQuery}</p>
    </div>
  );
}

function App() {
  return <SearchBox />;
}

export default App;

/*
  Notes:
  - query updates on every keystroke; debouncedQuery only updates
    400ms after the most recent keystroke, thanks to the cleanup
    function cancelling the previous timeout each time query changes
    again before it fires.
  - Watching both values on screen while typing quickly makes the
    debounce effect visible directly — the debounced line visibly
    lags behind until typing pauses.
*/