problem with firefox browser about use-timer HOT 10 CLOSED

Hello @mha15

Thanks for opening this issue.
Could you, please, reproduce this problem, on Stackblitz for example, and share the link?

Thanks.

from use-timer.

Hello @mha15

Thanks for opening this issue.
Could you, please, reproduce this problem, on Stackblitz for example, and share the link?

Thanks.

thanks for your response I had write it simply in this linke
in chrome it will increase to 0 but in firefox it will stuck on second 1

I thinks that you should check finishing in interval and no need to use timeout function

from use-timer.

another idea is to use setTimeout with +1 millisecond
can you fix it soon?
i would be happy to make a PR for it?

from use-timer.

Thanks for your example. I was able to reproduce it.
As explained here about timers,

They cannot be trusted, there are no accuracy guarantees for them. They are allowed to lag arbitrarily, and they do not keep a constant pace but tend to drift (as you have observed).

The drift is different between Firefox and Chrome.
I can't check finishing inside interval, because i don't have access to last time value, due to closure. But there are some interesting resources about creating an accurate timer:

• https://www.sitepoint.com/creating-accurate-timers-in-javascript/
• https://medium.com/@swainson/accurate-javascript-timers-f71e0af5df32

We should rely on Date object or, better, Performance API.
For now, in order to fix temporarily this problem, we could increase setTimeout delay, as you said, by adding part of the interval.

Example:

const driftDelay = interval * 0.25;
const delay = Math.abs(endTime - (pausedTimeRef.current || initialTime)) * interval + driftDelay;

EDIT: check my following comment #7 (comment)

from use-timer.

I have a simpler solution, which does not need any setTimeout.

  useEffect(() => {
    if (endTime === null) {
      return;
    }

    if (time === endTime) {
      cancelInterval();
      setShouldResetTime(true);
    }
  }, [endTime, time]);

Inside effect, we just check if endTime is reached, and if it's the case, we cancel interval timer.
createTimeout method can be deleted so.

Can you implement that and check if there is no regression, please? I just looked and unit test pass.

from use-timer.

@mha15 any update?

from use-timer.

I have a simpler solution, which does not need any setTimeout.

  useEffect(() => {
    if (endTime === null) {
      return;
    }

    if (time === endTime) {
      cancelInterval();
      setShouldResetTime(true);
    }
  }, [endTime, time]);

Inside effect, we just check if endTime is reached, and if it's the case, we cancel interval timer.
createTimeout method can be deleted so.

Can you implement that and check if there is no regression, please? I just looked and unit test pass.

I don't think that using an effect hook be a good idea (effect hook will not run sync and we shouldn't trust on it)

I can't check finishing inside interval, because i don't have access to last time value, due to closure. But there are some interesting resources about creating an accurate timer:
I didn't understand what is the problem? why couldn't we check time value inside of interval?

from use-timer.

Make the test and try to access last time value inside interval: it will not work because of closure (only original value is captured).
I don't think there is problem using effect. All timers are side-effect, so It does not seems bad to handle timer cancellation inside an effect hook. The idea is to cancel timer as soon as we see that end time is reached. Perhaps you are afraid of concurrency in the event of a very rapid time update?

from use-timer.

Make the test and try to access last time value inside interval: it will not work because of closure (only original value is captured).

about this we can using a ref to store lastValue and update it in interval function

The idea is to cancel timer as soon as we see that end time is reached. Perhaps you are afraid of concurrency in the event of a very rapid time update?

yes I'm not sure that it's a good idea to work on react way

from use-timer.

@mha15 👍 Let's go with the lastTimeRef. Can you make a PR please?

from use-timer.