I am making a website that retrieves and displays my playlists, everything was working fine yesterday, this morning while I did not touch the code I have an error 429 every time I want to retrieve data on the api.
My code :
export const getUserPlaylist=async(params=null){
params={
params,
headers:{'Authorization': `Bearer ${AccessToken}`}
}
const response=await axios.get("https://api.spotify.com/v1/me/playlists", params)
return response.data
}
I've try with and without axios, that's not the problem.
I use this function in a React component class here :
async searchPlaylists(){
if(!this.state.allPlaylists){
const response=await getUserPlaylist({limit:50})
this.setState({allPlaylists:response.items})
}
let playlists=[]
for(let i of this.state.allPlaylists){
if(i.name.indexOf(this.props.playlistName)===0){
playlists.push(new Playlist(i))
if(playlists.length===3) break
}
}
this.setState({playlists})
}
async componentDidMount(){
this.searchPlaylists()
}
async componentDidUpdate(){
this.searchPlaylists()
}
componentDidUpdate() is a lifecycle hook which runs the code within it every time the component re-renders.
A component in React updates whenever there is a change in it's state or it's props.
searchPlaylists() sets the state, which causes a re-render.
In other words, you have created an infinite loop where you update the state at every re-render, which causes another re-render, sending an API request every time.