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

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

#1

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


#2

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).


#3

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?