Debounce action integrated for input with React functional component
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;