# React and fadein/out effects

**URL:** <https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866>\
**Category:** General\
**Created:** [January 26, 2017, 5:43pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866 "2017-01-26T17:43:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shin8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shin8/32/162313_2.png) [@Shin8](https://forum.freecodecamp.org/u/Shin8)\
**Post date:** [January 26, 2017, 5:43pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866/1 "2017-01-26T17:43:33Z")

</div>

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  
[http://codepen.io/Shin8/full/EZwyBM/](http://codepen.io/Shin8/full/EZwyBM/)

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Josh5231](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/josh5231/32/3269_2.png) [@Josh5231](https://forum.freecodecamp.org/u/Josh5231)\
**Post date:** [January 26, 2017, 6:52pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866/2 "2017-01-26T18:52:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shin8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shin8/32/162313_2.png) [@Shin8](https://forum.freecodecamp.org/u/Shin8)\
**Post date:** [January 26, 2017, 7:04pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866/3 "2017-01-26T19:04:42Z")

</div>

Thanks for the reply 🙂  
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 😭

---

<div class="post-metadata">

**Author:** ![Shin8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shin8/32/162313_2.png) [@Shin8](https://forum.freecodecamp.org/u/Shin8)\
**Post date:** [January 26, 2017, 7:58pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866/4 "2017-01-26T19:58:35Z")

</div>

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 😺

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:11pm UTC](https://forum.freecodecamp.org/t/react-and-fadein-out-effects/80866/5 "2021-01-16T17:11:54Z")

</div>

Closed on January 16, 2021, 5:11pm UTC