Как я могу остановить таймер, не используя useState и useEffect?

В простом компоненте таймера я хочу запускать и останавливать его с помощью кнопок, но интервал не останавливается с помощью простой функции clearInterval. Неужели я что-то упускаю?

import React, { useState } from 'react'

export default function Timer3() {
    const [seconds, setseconds] = useState(0)

    let intervalId;

    const startTimer = () => {
        intervalId = setInterval(() => {
            setseconds((pre) => pre + 1)
        }, 1000)
    }

    const stopTimer = () => {
        clearInterval(intervalId)
    }

    return (
        <>
            {seconds}
            <button onClick={startTimer}>начать</button>
            <button onClick={stopTimer}>остановить</button>
        </>
    )
}

Я знаю, что в приведенном выше коде есть ошибка: если я нажму «Начать» дважды, он будет считать дважды. Я собираюсь исправить это после того, как выясню, как его остановить. В сети есть также решение использовать useEffect для запуска таймера, но я не ищу код — просто простой ответ на вопрос, почему это не работает.

Проблема в том, что каждый раз, когда состояние обновляется, компонент перерисовывается, и переменная intervalId повторно объявляется, и любое предыдущее значение теряется, поэтому, когда кнопка остановки нажата, у нее нет ссылки на идентификатор работающего таймера.

Вы можете исправить это, используя ссылку React для хранения значения идентификатора интервала. Ссылки React сохраняются от одного цикла рендеринга к другому.

function Timer3() {
  const [seconds, setseconds] = React.useState(0);
  const intervalId = React.useRef();

  React.useEffect(() => {
    // Очистите любые работающие таймеры, когда компонент размонтируется
    return () => {
      clearInterval(intervalId.current);
    }
  }, []);

  const startTimer = () => {
    // Очистите любые работающие таймеры перед перезапуском
    clearInterval(intervalId.current);

    intervalId.current = setInterval(() => {
      setseconds((pre) => pre + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalId.current);
  };

  return (
    <>
      {seconds}
      <button onClick={startTimer}>начать</button>
      <button onClick={stopTimer}>остановить</button>
    </>
  );
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Timer3 />
  </React.StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<div id="root" />

intervalId сбрасывается каждый раз, когда компонент перерисовывается, так как это обычная переменная.

Вы можете использовать useRef вместо useState и useEffect, useRef сохраняет значение и не перерисовывается при изменении.

const intervalId = useRef(null);

В startTimer присвойте интервал intervalId.current вместо просто intervalId.

В stopTimer вызовите clearInterval(intervalId.current).

Вы можете хранить intervalId в ссылке useRef вместо того, чтобы повторно объявлять его каждый раз:

import React, { useState, useRef } from 'react';

export default function Timer3() {
    const [seconds, setSeconds] = useState(0);
    const intervalId = useRef(null);

    const startTimer = () => {
        if (intervalId.current) return; 
        intervalId.current = setInterval(() => {
            setSeconds((prev) => prev + 1);
        }, 1000);
    };

    const stopTimer = () => {
        clearInterval(intervalId.current);
        intervalId.current = null; 
    };

    return (
        <>
            {seconds}
            <button onClick={startTimer}>Начать</button>
            <button onClick={stopTimer}>Остановить</button>
        </>
    );
}