debounce effect integrate with the input element using functional component. You can refer the component created in file DebounceReactInput.js

Demo

Live demo

https://stackblitz.com/edit/react-debounce-input-functional

Usage

import { useState } from "react";
import DebounceReactInput from "./DebounceReactInput";
import "./app.css";

const sampleData = [
  {
    first: "Dhanesh",
    last: "Mane",
  }
];

function App() {
  const [userList, setUserList] = useState(sampleData);

  return (
    <div className="App">
      <DebounceReactInput userList={userList} setUserList={setUserList} />
      <div>
        <hr />
        {userList.map((user) => {
          return (
            <div>
              {user.first} {user.last}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;