movies autocomplete exercise

At one of my interviews a was asked to create autocomplete that search movies and displays results.
I quickly created some input that handles changes and populates the state with the input:

export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => setTerm(e.target.value)}
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}

the problem here, that changes populated imediately. and request sent for every character...
This can lead to performance issues and also - it is not exactly what user wants - he wants to start search after he finished to type the term...

Debounce

Instead we can take advantage of so called - debounce technique:
This means we only startnig the search after we indicated that user finished typing
If no typing happened for some period (one second in our case) only then we send a search request:

let debounceTimer;

const debounce = (callback, time) => {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(callback, time);
};
export default function App() {
  const [term, setTerm] = useState("");
  useEffect(() => {
    // request logic...
  }, [term])
  return (
    <div className="App">
      <h1>
        <input
          onChange={(e) => debounce(() => {
           setTerm(e.target.value), 1000)}
          }
        />
      </h1>
      <h2>Term: {term}
    </div>
  );
}