useAudioPlayer: Maximum update depth exceeded when using React-Router
Using the Provider and audio hooks under React-Router produces a Maximum update depth exceeded error loop
const routes = {
'/': () => <Provider station='clouds' />,
'/:station': ({ station }) => <Provider station={station} />
}
function Provider ({ station }) {
return (
<AudioPlayerProvider>
<Radio station={station} />
</AudioPlayerProvider>
)
}
function Radio (props) {
const [song, setSong] = useState({
album: 'Press the Play button to start the radio',
title: placeholders[Math.floor(Math.random() * placeholders.length)]
})
const { togglePlayPause, ready, loading, playing, volume, mute } = useAudioPlayer({
src: `https://play.squid-radio.net/${props.station}?cache_ts=${new Date().getTime()}`,
onend: () => console.log('sound has ended!')
})
return (
<div />
)
}
const App = () => {
const routeResult = useRoutes(routes)
return routeResult || (
<script>{(
window.location.href = '/404.html'
)}
</script>
)
}
Environment (please complete the following information):
- Browser/ browser version: Firefox 81.0.2 64-bit
- Library version: 1.2.2
- React version: 16.13.1
- Node version: 14.x
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 16 (8 by maintainers)
hey @jorgev259 I think I’m on to something. I should hopefully have a release out by the weekend with a fix or work-around for the issue you are having with streaming audio