Estoy tratando de implementar la funcionalidad de búsqueda, pero no quiero llamar a la API cada vez que escribo algo. aquí está el código:
const [term, setTerm] = useState(""); const [result, setResult] = useState([]); useEffect(() => { const search = async () => { const respond = await axios.get("https://en.wikipedia.org/w/api.php", { params: { action: "query", list: "search", origin: "*", format: "json", srsearch: term, }, }); setResult(respond.data.query.search); }; if (!result.length) { if (term) { search(); } } }, [term, result.length]);puede usar la función setTimeout() y clearTimeout en la función de limpieza y el enlace useRef para obtener el estado anterior para llamar a la API solo una vez:
const [result, setResult] = useState([]); const termUseRef = useRef(); useEffect(() => { termUseRef.current = term }) const prevTerm = termUseRef.current; useEffect(() => { const search = async () => { const respond = await axios.get('https://en.wikipedia.org/w/api.php', { params: { action: 'query', list: 'search', origin: '*', format: 'json', srsearch: term, }, }); setResult(respond.data.query.search); }; if (!result.length) { if (term) { search(); } } else if(term !== prevTerm) { const debounceSearch = setTimeout(() => { if (term) { search(); } }, 1200); return () => { clearTimeout(debounceSearch); }; } }, [term, result.length, prevTerm]);