React and fadein/out effects

Hi guys!
Just a while ago I ‘finished’ (still need to fix this thing) working on the leaderboard challenge using React. Everything was going fine until I added a indicator (some text so people can tell if the client is fetching new data or not). To be more precise, that indicator is just a text and I show it before a json request and hide it when it’s over.
I used fadeIn and fadeOut for that task. I didn’t expect any errors because the code is very simple but when I ran it that text blinks and never stops.

So my question is, where do I put that code for it to work properly? Why it keeps blinking? Is it because the react code is spamming that function over and over again, or it’s just a bug?

Here is the demo

Thanks in advance!

It is happening because the “dostuff” function is being called over and over. The issue is that you are calling it in ‘componentDidUpdate()’. So after the data is loaded the component gets updated, that then triggers the componetDidUpdate function and you end up with an infinite loop. I simply removed the componetDidUpdate function, as it is not needed, and it works as it should. :slight_smile:

1 Like

Thanks for the reply :slight_smile:
It does work if I remove it from componentDidUpdate() but then the new json requests (to update the list, I forgot to put some indicators. The ‘all time’ and ‘30 days’ headers are clickable) stops working. It’s really strange, I wonder why that thing loops infinitely :sob:

I was able to fix it (it was kinda risky, I almost broke the whole thing xD)
It’s working now

Thanks for the help :smiley_cat:

1 Like