How to stop variable re initializing in context - reactjs

Question

I have a variable in my context with the base url for my api and i add parameters to that base call to add parameters, the problem that i have is that i can't concatenate more than one parameter at a time, so if for example set my checkbox for one brand the url updates to that brand filter and the function adds the brand filter parameter, but if i search something the url re-initialites itself and deletes the other parameter.
Some images for more clarity:
If i make a search:
The url console logs like this, the line 87 logs the url before i concatenate the parameter and the 91 after i concatenate the parameter:
And if i check the Nike brand that should only show the Nike Air Yeezy product and url should be "http://localhost:5000/api/v1/products?name=Yeezy&company=Nike" is only "http://localhost:5000/api/v1/products?company=Nike&"
My theory is that as i declarate the base url parameter every time i do one function the context resets and that url var re initializes, but how can i stop this? I searched at how to make a string state and concatenating that state but couldn't find anything.
Here is the part of the context where i handle the new api calls, if something seems weird/missing is because i cut the context to make it more clear
var url = "/api/v1/products?";
const [productList, setProductList] = useState([]);
const [brandFilter, setBrandFilter] = useState([]);
const [search, setSearch] = useState({
text: "",
});
const getProductList = async () => {
const response = await fetch(url);
const responseJson = await response.json();
if (responseJson) {
setProductList(responseJson.products);
}
};
useEffect(() => {
getProductList();
}, []);
useEffect(() => {
setSearchUrl();
getProductList();
}, [search]);
const setBrandUrl = () => {
console.log(url);
if (brandFilter.length > 0) {
for (var i = 0; i < brandFilter.length; i++) {
url += `company=${brandFilter[i]}&`;
}
}
console.log(url);
};
const setSearchUrl = () => {
console.log(url);
if (search.text != "") {
url += `name=${search.text}`;
}
console.log(url);
};
useEffect(() => {
setBrandUrl();
getProductList();
}, [brandFilter]);

Answer 1

It's because you've got the useEffect split into two; one which is reacting to the search changing, and one which is reacting to the brands changing. You need to combine those into one.
If we look at the effect for when the search changes, and we reduce the code to what's actually running, your effect is doing this:
useEffect(() => {
var url = "/api/v1/products?";
if (search.text != "") {
url += `name=${search.text}`;
}
getProductList();
}, [search]);
i.e. it ignores brandsFilter completely. You need to have both the brandsFilter and the search as a dependency for a single effect:
useEffect(() => {
let url = "/api/v1/products?";
if (search.text) {
url += `name=${search.text}`;
}
if (brandsFilter.length) {
const brands = brandsFilter.map(b => `&brand=${b}`).join('');
url += search.text ? brands : brands.substr(1);
}
// NOTE: pass the 'url' to the get as a parameter here!
getProductList(url);
}, [search, brandsFilter]);
Note: this is easier if you use a library like query-string to do the heavy lifting for you:
import qs from 'query-string';
useEffect(() => {
const url = qs.stringifyUrl({
url: "/api/v1/products?",
query: {
name: search.text || undefined,
brands: brandsFilter,
}
});
getProductList(url);
}, [search, brandsFilter]);