stop multiple api call when page refreshes in product listing page

useEffect(() => {
alert("query params changed");
console.log(location.search);
const params = new URLSearchParams(location.search);
if(location.search){
const brands = params.get('brand');
// console.log(brands);
const colors = params.get('color');
// console.log(colors);
const sizes = params.get('size');
// console.log(sizes);

    if (brands){ alert("brands set"); setFilterBrands(JSON.parse(brands)); setpageRefreshed(0)}
    if (colors) { alert("colors set"); setFilterColors(JSON.parse(colors)); setpageRefreshed(0)}
    if (sizes) {alert(" sizes set"); setFilterColors(JSON.parse(sizes)); setpageRefreshed(0)}

    }

}, []);
useEffect(() => {
//call api here
},[filterbrand,filterCololrs]);
this way second useeffect will be called two times . how to stop it.