setter function is being invoked seemingly every render but its not causing an infinite loop

Viewed 26
const YTPlayer = ({playlist}) => {
      const [player,setPlayer] = useState(false)
      const loadPlaylist = playlist => {
        player.loadPlaylist(playlist);
      };
      const play = () => {
        loadPlaylist(playlist);
        player.playVideo();
      };
      const pause = () => {
        player.pauseVideo();
      };

      const onReady = event => setPlayer(event.target)
      return <YoutubeIFrame onReady={onReady} /> 
}

The YouTube Iframe calls the onReady argument once it has loaded, which calls setPlayer. So YTPlayer should rerender, destroying the previous Iframe and creating a new one that also does the same thing. Shouldn't this cause an infinite loop?

Thats what I expected, but it doesn't behave that way. It rerenders 5 times, then stops. The play,pause,loadPlaylists functions all work fine. So What is the mistake in my thinking?

0 Answers
Related