React useState and useEffect does not work as expected - reactjs

Question

I have one state for storing an object and two useffects. The first useeffect occurs only once in the first render, while the second occurs whenever the 'toFetch' state is changed. In addition, has an initial value for toFetch that is the coordinates of Ankara and is stored in object. First, useffect determines whether the user has granted permission for geolocation. If allowed, it is set to fetch the current location; if it is not, it does nothing. This time, the second useffect works. and basically fetches data from the API and sets the "selected" state. However, when the user allows geolocation, the selected state continues to use Ankara coordinates. What is the problem?
Here is my Code
function Contex({ children }) {
let obj = { lat: 39.57, lng: 32.53 }; // coordinates of ankara
const [weather, setWeather] = useState([]);
const [selected, setSelected] = useState({});
const [toFetch, settoFetch] = useState(obj);
const [loading, setloading] = useState(false);
useEffect(() => {
const initialSetup = () => {
const sb = (pos) => {
const {
coords: { latitude, longitude },
} = pos;
settoFetch((prev) => {
return { type: "single", lat: latitude, lng: longitude };
});
};
const eb = (err) => {};
navigator.geolocation.getCurrentPosition(sb, eb, {
enableHighAccuracy: true,
});
};
initialSetup();
}, []);
useEffect(() => {
const den = async () => {
setloading(true);
let x = toFetch;
if (toFetch.type === "country") x = await getCountryStates(toFetch.name);
const weatherData = await dataProvider([x].flat());
setWeather(weatherData);
setSelected(weatherData[0]);
setloading(false);
};
den();
}, [toFetch]);
return (
<context.Provider
value={{
weather,
setSelected,
selected,
settoFetch,
loading,
toFetch,
}}
>
{children}
</context.Provider>
);
}
export { Contex, context };
Edit 1:
I tried to use geolocation as promise but it also did not work. Please help

Answer 1

function Contex({ children }) {
let obj = { lat: 39.57, lng: 32.53 }; // coordinates of ankara
const [weather, setWeather] = useState([]);
const [selected, setSelected] = useState({});
const [toFetch, settoFetch] = useState(obj);
const [loading, setloading] = useState(false);
useEffect(() => {
const initialSetup = () => {
const sb = (pos) => {
const {
coords: { latitude, longitude },
} = pos;
settoFetch((prev) => {
return { type: "single", lat: latitude, lng: longitude };
});
};
const eb = (err) => {};
navigator.geolocation.getCurrentPosition(sb, eb, {
enableHighAccuracy: true,
});
};
initialSetup();
}, []);
useEffect(() => {
const den = async () => {
setloading(true);
let x = toFetch;
if (toFetch.type === "country") x = await getCountryStates(toFetch.name);
const weatherData = await dataProvider([x].flat());
setWeather(weatherData);
setSelected(weatherData[0]);
setloading(false);
};
den();
}, [toFetch.lat, toFetch.lng]); // Using an object in your useEffect dependency array also causes the infinite loop problem.
return (
<context.Provider
value={{
weather,
setSelected,
selected,
settoFetch,
loading,
toFetch,
}}
>
{children}
</context.Provider>
);
}
export { Contex, context };