my API request is looping until the server send an error

I'm trying to get my top listened artists on spotify with the spotify API using reactjs and the spotify-web-api-node package. I also use the useState and useEffect. When I run the app the getMyTopArtists function run in loop until it gets a 426 status code, that means that the rate limit is reached.
How can I fix this bug pls?

const [topArtists, setTopArtists] = useState([]);

useEffect(() => {
      if (!accessToken) return
      
      spotifyApi.getMyTopArtists({limit: 5, time_range: 'medium_term'}).then(res => {
        setTopArtists(res.body.items.map(artist => {
          return{
            name: artist.name,
            uri: artist.uri,
            cover: artist.images.uri,
            genre: artist.genres,
          }
        }))
      })
    }, [topArtists, accessToken])

The issue here is that in your dependency array of the useEffect hook, you included topArtists. So, what is happening is that once the accessToken becomes truthy, you send a request to fetch your top artists. Once your artists are fetched, you update topArtists state value. Once topArtists is updated (due to the dependency array), the useEffect runs again, updates State again, so on and so forth.

While I'm not the absolute expert on it, it is likely that React is not performing deep comparison for the array of objects, so even if the value is identical, it registers it as "it changed".

The solution in this case is simple --> just remove topArtists from your dependency array.

Alternatively, you could consider 2 other methods:

1. in the same way you are doing if (!accessToken) return you can do if (topArtists.length) return to not fetch again if fetched once. Similarly, you can set the state's initial value to something like null and do if (!topArtists) spotifyApi.....
2. instead of this useEffect hook, you might be able to attach this functionality as a .then to wherever you are obtaining the accessToken. If you are sending a login request to Spotify and receiving the token in the response, you can do something like

spotifyApi.login({details}).then(res => {
  const {accessToken:myToken} = res;
  setAccessToken(myToken);
  return myToken;
}).then(token => {
   //recommended to use the token here since setState is not instant
  spotifyApi.getMyTopArtists({limit: 5, time_range: 'medium_term'}).then(res 
   => {
        setTopArtists(res.body.items.map(artist => {
          return{
            name: artist.name,
            uri: artist.uri,
            cover: artist.images.uri,
            genre: artist.genres,
          }
        }))
   }