debounce

yarn add use-debounce

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

const App = () => {
  const [text, setText] = useState("");
  const [value] = useDebounce(text, 1000);

  return (
    <>
      <input onChange={e => setText(e.target.value)} />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </>
  );
};

export default App;

throttle

yarn add use-throttle

import React, { useState } from "react";
import { useThrottle } from "use-throttle";

const App = () => {
  const [text, setText] = useState("");
  const value = useThrottle(text, 1000);

  return (
    <>
      <input onChange={e => setText(e.target.value)} />
      <p>Actual value: {text}</p>
      <p>Throttle value: {value}</p>
    </>
  );
};

export default App;