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?