How to implement debounce

snippet.js

// #1. With a controlled input
import { useState, useEffect } from 'react';
const debounce = require("lodash.debounce");

function SearchBar({ onSearch, wait = 500 }) {
  const [value, setValue] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    onSearch && onSearch(searchTerm);
  }, [searchTerm]);

  const debouncedSearch = useCallback(
    debounce((term) => setSearchTerm(term), wait),
    []
  );

  function onChange(e) {
    setValue(e.target.value);
    debouncedSearch(e.target.value);
  }

  return (
    <input
      value={value}
      onChange={onChange}
      type="text"
      placeholder="Search names..."
    />
  );
}


// #2. With an un-controlled input
function SearchBar({ onSearch, wait = 1000 }) {
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    onSearch && onSearch(searchTerm);
  }, [searchTerm]);

  const onChange = debounce((e) => setSearchTerm(e.target.value), wait);

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

PS. Search input usually doesn't need to be controlled because we're not interested in the current value but rather in the debounced one. So I'd give preference for method #2