Estoy tratando de configurar un temporizador onChange para la barra de búsqueda, pero no sé exactamente cómo. Probé varias opciones, pero ninguna funcionó. ¿Cómo se debe crear y llamar a la función de rebote? ¿Tengo que crear una función especial o está bien cómo llamé a // onChange? ¿Puedes ayudarme con alguna información?

Búsqueda:

 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

aplicación:

 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;