debound hook

debound hook.md

import React, { useState, useCallback } from "react";
import "./styles.css";
import { debounce } from "lodash";


export default function App() {
  const [userQuery, setUserQuery] = useState("");
  const sendQuery = query => console.log(`Querying for ${query}`);
  const delayedQuery = useCallback(debounce(q => sendQuery(q), 500), []);
  const onChange = e => {
    setUserQuery(e.target.value);
    delayedQuery(e.target.value);
  };

  return (
    <div className="App">
      <h2>Start editing to see some magic happen!</h2>
      <input value={userQuery} onChange={onChange} />
    </div>
  );
}

https://codesandbox.io/s/debounce-hook-zgmpn?file=/src/App.js:0-600