SupremeTechnopriest / react-idle-timer

User activity timer component
https://idletimer.dev
MIT License
1.15k stars 143 forks source link

Issue when resetting timer🐞 #378

Open leahyjulian opened 1 year ago

leahyjulian commented 1 year ago

What happened?

When resetting the timer it appears to reset correctly when tracking remaining time, however the timeout value doubles before onIdle is called again

Reproduction Steps

1. set a timeout for 10 seconds
2. increase a count var every time idle is called 
3. reset timer
4. After first 10 seconds counter increase by 1 as expected
5. next time counter does not increase again for 20 seconds
6. New timeout appears to have doubled

Relevant log output

No response

Screenshots or Additional Context

sandbox

import { useIdleTimer } from "react-idle-timer";
import { useEffect, useState } from "react";

export default function App() {
  const [remaining, setRemaining] = useState(0);
  const [count, setCount] = useState(0);

 // correct behaviour first time onIdle is called
 // after reset onIdle is called every 20 seconds instead of 10
  const onIdle = () => {
    setCount((prev) => (prev += 1));
    reset();
  };

  const { reset, getRemainingTime } = useIdleTimer({
    onIdle,
    timeout: 10_000,
    throttle: 500,
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setRemaining(Math.ceil(getRemainingTime() / 1000));
    }, 500);

    return () => {
      clearInterval(interval);
    };
  });
  return (
    <div className="App">
      <h1>Reset</h1>
      <h2>Time Remaining {remaining}</h2>
      <h2>Count: {count}</h2>
    </div>
  );
}

Module Version

5.7.2

What browsers are you seeing the problem on? Select all that apply.

Chrome

What devices are you seeing the problem on?

Desktop

Verification