Using throttle and debounce in a React function component

debouncedOnChange.js

/**
* Source: https://medium.com/@rajeshnaroth/using-throttle-and-debounce-in-a-react-function-component-5489fc3461b3
*/
const Search = () => {
  const [userQuery, setUserQuery] = useState("");
  const delayedQuery = useCallback(_.debounce(q => sendQuery(q), 500), []);
  // alternative
  // const delayedQuery = useRef(_.debounce(q => sendQuery(q), 500)).current;
  const onChange = e => {
    setUserQuery(e.target.value);
    delayedQuery(e.target.value);
  };
  return (
    <div>
      <label>Search Fixed:</label>
      <input onChange={onChange} value={userQuery} />
    </div>
  );
};