ReactJS component lifecycle running too many times! (Camper Leader board)

I’ve been working on the Camper Leaderboard (on codepen here), and although I’ve almost completed the challenge, I could never figure out how to use the lifecycle methods correctly.

While using the lifecycle method componentDidUpdate() to call the API when toggling between brownie points, but when I put any function within that lifecycle it would call that function hundreds of times until it timedout. Even if I put a function that had nothing to do with an API call, it would still run seemingly forever. However, it only ran once (after an update) when placing a console.log() there.

I eventually gave up figuring out why and made the site work a different way, but I’m still curious as to what was really going on.

Runs w/out problem

image

Causes big problems!

image
image

If your this.URL() is the same now as it was before (that you had the issue) it’s because you call this.setState() inside it. You kept setting a new state every time the component was updated so you created an infinite loop (kind of).

1 Like

Did you have a problem with componentDidUpdate() or componentWillUpdate() ? your post says the latter but your screen shot says the former. If it is with componentWillUpdate() , as @TheGallery says you can not call this.setState() in that method according to the doc , but you can with componentDidUpdate(), either way I don’t see where you are calling this.setState().

But more strange is that your method url(), accepts a boolean as an argument but you are sending it an object (this.state) should you not be sending it this.state.status per the definition of your state?