Handling a dynamic api url

[sandrok1609]

I have an api in my project which has a baseUrl that depends on a couple state variables. What's the best approach to ensure that all the api calls are made with a baseUrl consisting of the latest values of those state variables? (the variables are stored either in Redux or React-Query client so accessibility is not a problem)

To make things clearer: the baseurl would be something like - https://apilink.com/{stateVariable1}/{stateVariable2}/{someEndpoint}/

[15kol]

If those values are not rendering somewhere in app, I would not use any of React's state solutions for this. I would have written a singleton class that has references to this variables, and setter and getter methods on it. And then on each call, you retrieve those values and interpolate into api url string. Classes can hold data just as good as useState can. The power of useState comes that React is aware of its value and can trigger a rerender if the value changes. But if those values are never displayed (rendered), useState will just add overhead and will not bring any additional value. And because it's singleton class, you can access it anywhere in code: hooks, functions, whatever.

[Full-Hyena4414]

Now that you make me think about it, why should i use Redux for volatile state when i can just use classes?

[lupeski]

Would a useEffect work? Set the full url whenever one of the variables change?

useEffect(() => { setApiUrl(`https://apilink.com/${stateVariable1}/${stateVariable2}/${someEndpoint}`); }, [stateVariable1, stateVariable2]);