Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Noob question 2 - update too fast for useState setter?

Go to solution Solved by OSUblake,

Recommended Posts

Hello again (so soon...)


I wrote this test trying to control a ant.design Progress bar's percent value, simply moving from 0 to 100 in a few seconds.


To see what "happens", open the console and click "press start". then click "go back" to return home and do it again


I want to use gsap for the job, obviously not for such simple task

but also to eventually define "weirder",  fake loadbar behaviors.


Problem : my proxy value updates correctly (i.e. log from onUpdate),

but I cannot figure out the correct place to call the state setter (setPercent).

It tried two places that are commented out in "src/components/loadingbar/loadingbar.js" (lines 21 & 27)

but it generally ends up slowing down everything, and the progress bar is not even updated.


I can't reproduce it anymore, but I also saw once an error message saying there was basically too many new values.


Now my questions are :

1) do you see any way to modify this to get the progressbar to update as expected?

I'm still new to gsap + React (especially useEffect) so again my apologies if that's extremely simple.


2) in general, what would be good practice when dealing with objects that cannot be updated too often.

Is there a way to downsample gsap somehow?...


Many thanks in advance !




Link to comment
Share on other sites

  • Solution

Hi @JuVince


With hooks, if your animation is not inside something like a useEffect, you're probably doing it wrong.


Try something like this. 




Also, can I ask why you are using React? I'm trying to uderstand our React users better and how to improve the development experience with React.


  • Like 2
Link to comment
Share on other sites

4 hours ago, JuVince said:

2) in general, what would be good practice when dealing with objects that cannot be updated too often.


It really depends on what you're doing. Do you have an example?


In general, it's not a good idea to animate state in react, like what you're doing with the percent. React has do a bunch of stuff behind the scenes whenever the state changes. It's faster to just let gsap update the object or element directly, but sometimes that isn't possible, like with that progress bar. With that example, you're forced into using state to make changes.


  • Like 1
Link to comment
Share on other sites

Hi @OSUblake

Thank you so much, that's exactly what I needed.

I didn't study useRef yet, this is why. And I obviously I missed the second argument of of useEffect, in my missed attempt I did put the percent variable

but I didn't think it should be setPercent instead, I think I get it now.


About 2), I don't have really an example, but I think you did answer my question, precisely with the conditional firing of useEffect. This way I guess the state is not overloaded. But I'll follow you advice and make sure to avoid animating states as much as possible. 


Finally to answer your question about React. It's a tricky one, because I'm really new to this, and definitely not (and not planning to become) a professional programmer, so my opinion will probably be marginal. I'm a music composer and digital artist, usually working with very different programming environments, mostly MaxMSP (visual prog. language) and CommonLISP (I know, pretty old school :D).

I have a specific artistic project where I want the audience to interact collectively with my system, during the performances, with their own smartphone.

Problem, our budget is still too small (hello covid) to hire someone full-time to program the interfaces. So in order to move on with the project and do actual testings in artistic setting I didn't have other choice than to train myself and start making prototypes. I hired a teacher a couple weeks ago, to help me figure things out and he oriented me towards React very early, I think because it's more adapted and accessible for what I have in mind.

If you want to know more don't hesitate to PM, but again I'm sure that's very far from the typical React user.


  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.