Как обновлять состояние по таймеру?

Question

[historydev]

Здравствуйте. Скажите пожалуйста, как я могу обновлять состояние раз в секунду? Я создал счётчик времени и мне нужно выводить его в компонент реакта, я пробую это таким образом:

const date = {
    hours: 0,
    minutes: 0,
    seconds: 0,
    isActive: false,
    start: function() {
      this.isActive = true;
      return this
    },
    stop: function() {
      this.isActive = false;
      return this
    }
  }

  function timer() {

    if(this.isActive) {
      if(this.seconds < 60) date.seconds += 1;
      else {
        this.seconds = 0;
        if(this.minutes < 60) date.minutes += 1;
        else {
          this.minutes = 0;
          this.hours += 1;
        }
      }
    }

    return this

  }

  const myTimer = timer.bind(date);
  const [timerState, setTimerState] = useState({});
  let interval;

  useEffect(() => {
    if(interval) clearInterval(interval);
    interval = setInterval(() => {
      if(clients.length > 1) {
          setTimerState(myTimer().start());
      } else {
        setTimerState(myTimer().stop());
      }
      console.log(timerState);
    }, 1000);
  }, [clients, timerState]);

Но обновляется он криво и очень много спама, как я могу это реализовать?
Спасибо.

Comments

[Александр Шипин]

const Timer = () => {
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);

    let toggle = () => {
        setIsActive(!isActive)
    }

    let reset = () => {
        setSeconds(0);
        setIsActive(false);
    }

    useEffect(() => {
        let interval = null;
        if (isActive) {
            interval = setInterval(() => {
                setSeconds(seconds => seconds + 1);  // раз в секунду добавляет 1 секунду
            }, 1000);
        } else if (!isActive && seconds !== 0) {
            clearInterval(interval);
        }
        return () => clearInterval(interval);
    }, [isActive, seconds]);

    return (
        <div>
            <h1>{seconds}</h1>
            <button onClick={toggle}>{isActive ? 'Pause' : 'Start'}</button>
            <button onClick={reset}>Reset</button>
        </div>
    )
}

export default Timer;

Дальше, я думаю вы сможете дополнить и/или модифицировать таймер под свои нужды

[historydev]

Александр Шипин, спасибо, да

[historydev]

Александр Шипин, а как передать ему состояние из вне чтобы держать последние данные таймера сохранёнными?

[Александр Шипин]

Владимир, информация есть здесь, посмотрите описанные там примеры

если нужно хранить в любой момент работы приложения, то смотрите в сторону Redux или mobX

[historydev]

Александр Шипин, я пробовал callback, не работает для состояния, пробовал передать его напрямую, я пробовал передать его через свойства, я что-то делаю не так

[historydev]

const Timer = ({callback, data}) => {
    const [seconds, setSeconds] = useState(data.seconds);
    const [minutes, setMinutes] = useState(data.minutes);
    const [hours, setHours] = useState(data.hours);
    const [isActive, setIsActive] = useState(clients.length > 1);

    let toggle = () => {
      setIsActive(!isActive)
    }

    let reset = () => {
      setSeconds(0);
      setIsActive(false);
    }

    useEffect(() => {
      let interval = null;
      if (isActive) {
        interval = setInterval(() => {
          if(seconds < 60) setSeconds(seconds => seconds + 1);
          else {
            setSeconds(0);
            if(minutes < 60) setMinutes(minutes => minutes + 1);
            else {
              setMinutes(0);
              setHours(hours => hours + 1);
            }
          }
          callback({hours, minutes, seconds});
        }, 1000);
      } else if (!isActive && seconds !== 0) {
        clearInterval(interval);
      }
      return () => clearInterval(interval);
    }, [isActive, seconds, minutes, hours, timerData]);

    return (
        <div className={'timer'}>
          <h1>{seconds}</h1>
          <h1>{minutes}</h1>
          <h1>{hours}</h1>
        </div>
    )
  }
<Timer callback={data => setTimerData(data)} data={timerData}/>

Answer 1

[Михаил Шведков]

Если нужно точное время - то это не лучшая идея. setInterval и setTimeout имеют лаги, которые начнут проявляться на дистанции.
Самый простой таймер это "текущее время - время запуска таймера". Таким образом, хранить надо не текущее положение счетчика, а время начала отсчета. А вот отрисовывать его да, по интервалу.

т.е.:

const startTime = newDate().now()
setinterval(()=>{
formatTimeToYourNeeds(new Date().now() - startTime)
}, 1000)

При таком раскладе вы не только получаете точный таймер, но и возможность изменять его, например выводить с точностью нужной точностью и интервалом