I have an Error 429 with spotify api on single request

Question

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()
}

Answer 1

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.

For more in-depth information.