Estoy tratando de llamar a la API usando el rebote, pero en este caso, la API llama a cada carácter, por ejemplo, escribo hola en la búsqueda y luego pide él, hel, infierno y hola, pero solo quiero la palabra final hola.
useEffect(() => { updateDebounceWord(word); }, [word]); const updateDebounceWord = debounce(() => { { word.length > 1 && dictionaryApi(); } }); function debounce(cb, delay = 500) { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { cb(...args); }, delay); }; } const dictionaryApi = async () => { // inital state [] console.log("hited") try { const data = await axios.get( `https://api.dictionaryapi.dev/api/v2/entries/${category}/${word}` ); console.log("Fetched",word); setMeanings(data.data); } catch (e) { console.log("error||", e); } };Además de la explicación de Dilshans, no quiero sugerir que haga un gancho con su función de rebote, para que pueda reutilizarla fácilmente:
const useDebounce = (cb, delay = 500) => { const timer = useRef(); // this cleans up any remaining timeout when the hooks lifecycle ends useEffect(() => () => clearTimeout(timer.current), [cb, delay]); return useCallback( (...args) => { clearTimeout(timer.current); timer.current = setTimeout(() => { cb(...args); }, delay); }, [cb, delay] ); };úsalo así en tus componentes:
const updateDebounceWord = useDebounce((word) => { console.log("api call here", word); }); useEffect(() => { updateDebounceWord(word); }, [word, updateDebounceWord]);Está utilizando el debounce en la fase de renderizado del componente. por lo tanto, cada vez que el componente reconstruya un nuevo árbol debido a la actualización de estado, updateDebounceWord se volverá a declarar. Tanto el nodo current como el de trabajo en workInProgress del componente no compartirán ningún dato. Si desea compartir los datos entre el árbol current y el de trabajo en curso, use workInProgress o useRef en el ámbito global
Una solución rápida es poner la variable del timer en el ámbito global.
// keep this on global scope let timer = null; function debounce(cb, delay = 500) { return (...args) => { clearTimeout(timer); timer = setTimeout(() => { cb(...args); }, delay); }; } export default function App() { const [word, setWord] = useState(""); const sendReq = debounce((keyword) => { apiReq(keyword); }) useEffect(() => { if (word.length > 0) { sendReq(word); } }, [word, sendReq]) const apiReq = (keyword) => { console.log('reached', keyword); } return ( <div className="App"> <input value={word} onChange={(e) => setWord(e.target.value)} /> </div> ); } También coloque todas las dependencias en la matriz useEffect dep; de lo contrario, es posible que no funcione como se esperaba.
useEffect(() => { updateDebounceWord(word); }, [word, updateDebounceWord]);