I am trying to poll the spotify API every second with setInterval when the component is loaded in. However, when testing this I receive an error: Invalid Hook Call..etc.
I believe this is because I am using useEffect within another useEffect when I am polling. I am not sure how to overcome this.
const getCurrentSong = () => {
useEffect(() => {
fetch('/spotify/current-song').then((response) => {
// check if not ok
if(!response.ok){
return {};
} else {
return response.json();
}
}).then((data) => {
setSong(data);
console.log(data);
});
},
[])
}
getRoomdetails();
getCurrentSong();
useEffect(() => {
const interval = setInterval(()=>{
//getCurrentSong();
console.log("test");
}, 1000)
return () => clearInterval(interval);
}, []);
This is the part of the code that is of concern. I initially tried to get rid of the useEffect in the getCurrentSong function but this would mean that I would get stuck in a loop of that function running which is not what I want. Ideally, I want the component to render, call the API, then poll it every second for any updates.