Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Maximum update depth exceeded when using React-Router

See original GitHub issue

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 (
      <Radio station={station} />

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: `${props.station}?cache_ts=${new Date().getTime()}`,
    onend: () => console.log('sound has ended!')

  return (
    <div />

const App = () => {
  const routeResult = useRoutes(routes)
  return routeResult || (
      window.location.href = '/404.html'

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:16 (8 by maintainers)

github_iconTop GitHub Comments

E-Kuerschnercommented, Nov 10, 2020

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

E-Kuerschnercommented, Dec 21, 2021

I recently discovered some code that could lead to an infinite loop and fixed it in version:

Curious if this will alleviate any of the issues mentioned above

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-router-dom Redirect causes : Maximum update depth ...
Well my instructor suggested this : and I thought I tried this already but I read the ...
Read more >
The location of the <Redirect/> will result in error( Maximum ...
The two sentences in the picture need to be exchanged, otherwise an error will be reported(Maximum update depth exceeded).
Read more >
How to Fix Maximum Update Depth Exceeded in React and ...
In this video, I show you several ways the dreaded " Max Update Depth Exceeded " error commonly occurs in React and React...
Read more >
React - maximum update depth exceeded - CodeProject
React. Hi, I have an error with my React app: JavaScript. <pre>index.js:1 Warning: Maximum update depth exceeded.
Read more >
Fix the "Maximum Update Depth Exceeded" Error in React
React is an excellent framework, but it can have some tricky “gotchas.” One of which is when you accidentally cause an infinite render...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found