Estoy tratando de implementar una búsqueda que realice una nueva consulta en cada cambio de carácter. Después de n milisegundos, necesito hacer un cambio en el objeto que almacena algunas propiedades.
//user typing const onInputChange = (e) => { let searchInput = e.target.value; useDebounce( handleSearchPropsChange({ filter: { searchInput, dateRange: { start, end } } }), 1000 ); }La función que estoy usando para la llamada retrasada
import {debounce} from 'lodash'; import {useRef} from 'react'; export function useDebounce(callback = () => {}, time = 500) { return useRef(debounce(callback, time)).current; }Pero estoy recibiendo el error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same appUn ejemplo sin lodash, solo Hooks.
UsarDebounce.js
import { useEffect, useCallback } from 'react'; export default function useDebounce(effect, dependencies, delay) { const callback = useCallback(effect, dependencies); useEffect(() => { const timeout = setTimeout(callback, delay); return () => clearTimeout(timeout); }, [callback, delay]); }Aplicación.js
import React, { useState } from 'react'; import useDebounce from './useDebounce'; import data from './data'; export default function App() { const [search, setSearch] = useState(''); const [filteredTitle, setFilteredTitle] = useState([]); // DeBounce Function useDebounce(() => { setFilteredTitle( data.filter((d) => d.title.toLowerCase().includes(search.toLowerCase())) ); }, [data, search], 800 ); const handleSearch = (e) => setSearch(e.target.value); return ( <> <input id="search" type="text" spellCheck="false" placeholder="Search a Title" value={search || ''} onChange={handleSearch} /> <div> {filteredTitle.map((f) => ( <p key={f.id}>{f.title}</p> ))} </div> </> ); }Demostración: Stackblitz