i'm trying to implement search functionality but i don't want to call the api every time i type something . here is the code:
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]);
you can use the setTimeout() function and clearTimeout in the cleanup function and the useRef hook to get the previous state to call the API only once :
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]);