I'll tell you about the use of Debounce Function as useDebounce Hook in React, which positively affects search request performance and which I also use frequently.
Firstly, let's create a react project in a simple way with the following command lines.
npx create-react-app my-app Then you can create and use useDebounce as in the code blocks below.
useDebounce.js
import { useState, useEffect } from "react"; const useDebounce = (val, delay) => { const [ debounceVal, setDebounceVal ] = useState(val); useEffect(() => { const handler = setTimeout(() => { setDebounceVal(val); }, delay); return () => { clearTimeout(handler); } }, [val]); return debounceVal; } export default useDebounce; App.js
import { useState, useEffect } from "react"; import useDebounce from "./useDebounce"; const DATA_LIST = [ "Luke Skywalker", "C-3PO", "R2-D2", "Darth Vader", "Leia Organa", "Owen Lars", "Beru Whitesun lars", "R5-D4", "Biggs Darklighter", "Obi-Wan Kenobi", ]; function App() { const [results, setResults] = useState([]); const [text, setText] = useState(""); const debounce = useDebounce(text, 500); useEffect(() => { const data = DATA_LIST.filter((el) => el.toLowerCase().includes(debounce)); setResults(data); }, [debounce]); return ( <div className="app"> <h1>search</h1> <input type="text" value={text} onChange={(e) => setText(e.target.value)} /> <div className="search-result"> {results.length > 0 ? ( results.map((item, i) => ( <div key={i} className="result-item"> {item} </div> )) ) : ( <p>No Result</p> )} </div> </div> ); } export default App; You can also review this example from my github repo: https://github.com/cagatay-unal/useDebounce-hook
Top comments (0)