I'm trying to set an onChange timer for the Search bar, but I don't know exactly how. I tried several options, but none worked. How should the debounce function be created and called? Do I have to create a special function or is it ok how I called // onChange? Can you help me with some information?
Search:
import React, {useState} from 'react'
import { debounce } from "lodash";
const Search = ({getQuery}) => {
const [text, setText] = useState('')
const onChange = (q) => {
setText(q)
getQuery(q)
}
return (
<section className='search'>
<form>
<input
type='text'
className='form-control'
placeholder='Search characters'
value={text}
onChange={(e) => onChange(e.target.value)}
// onChange={(e) => debounce(() => onChange(e.target.value), 3000)}
autoFocus
/>
</form>
</section>
)}
export default Search
App:
function App() {
const [items, setItems] = useState([])
const [info, setInfo] = useState([])
const [isLoading, setIsLoading] = useState(true)
const [query, setQuery]=useState('')
const [page, setPage] = useState(1)
const [id, setId] = useState()
const [status, setStatus] = useState()
useEffect(() => {
const fetchItems = async () => {
const result = await axios(`https://rickandmortyapi.com/api/character?name=${query}&page=${page}&id=${id}`)
setItems(result.data.results)
setInfo(result.data.info)
setIsLoading(false)
}
fetchItems()
}, [query, page, id ])
return (
<div className='container'>
<Router>
<Switch>
<Route exact path='/' >
<Header />
<Search getQuery={(q) =>setQuery(q) } />
<Dropdown getStats={(s) => setStatus(s) } />
<Character isLoading={isLoading} items={items} />
</Route>
<Route path='/character/:id'>
<Header />
<InfoCaracter key={items.id} items={items} />
</Route>
</Switch>
</Router>
</div>
)}
export default App;
You can use a separate state to store data for the request and call getQuery only when this value changes
const Search = ({ getQuery }) => {
const [text, setText] = useState('');
const [debouncedValue, setDebouncedValue] = useState(text);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(text);
}, 300);
return () => {
clearTimeout(handler);
};
}, [text]);
useEffect(() => {
getQuery(debouncedValue);
}, [getQuery, debouncedValue]);
const onChange = (q) => {
setText(q);
};
return (
<section className="search">
<form>
<input
type="text"
className="form-control"
placeholder="Search characters"
value={text}
onChange={(e) => onChange(e.target.value)}
autoFocus
/>
</form>
</section>
);
};