1

Estou com um problema no React ao tentar usar o clearInterval. Ele não está parando o intervalo criado por setInterval.

Podem me dar uma ajuda e ver no que eu estou errando ou o que está faltando, por favor?

function App() {
  let [count, setCount] = useState(0)

  function showTimer() {
    setCount(count++)
  }

  function startTimer() {
    setInterval(showTimer, 1000)
  }

  function pauseTimer() {
    clearInterval(startTimer)
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={startTimer}>start</button>
      <button onClick={pauseTimer}>pause</button>
    </div>
  )
}

export default App;
1
  • 3
    Quando você chama setInterval, ele retorna um ID que identifica o intervalo criado. É esse ID que você precisa passar para a função clearInterval. Atualmente, você está passando uma função que não tem nada a ver com o que clearInterval espera. Você pode utilizar uma referência (hook useRef) para manter e atualizar esse ID dentro do seu componente. Commented 27/03/2021 às 12:23

2 Respostas 2

3

Como o @Luiz Felipe disse no comentário, você está executando o clearInterval na sua função, e não no intervalo em si. Esse é um dos pontos que precisa ser corrigido e podemos fazer isso com o hook useRef.

Outro ponto que precisa ser corrigido é que, como esse código é assíncrono, devemos tomar um cuidado extra com o useState e fazer uma pequena adaptação para obter o valor correto do count. Você pode ler mais sobre isso nessa resposta.

Então, o código ficará assim:

function App() {

  const [count, setCount] = React.useState(0);
  const timerRef = React.useRef();

  function showTimer() {
    setCount(oldCount => (oldCount + 1));
  }

  function startTimer() {
    timerRef.current = setInterval(showTimer, 1000);
  }

  function pauseTimer() {
    clearInterval(timerRef.current);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={startTimer}>start</button>
      <button onClick={pauseTimer}>pause</button>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'));
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>


Uma outra forma de criar esse contador é com o uso do useEffect, mas ainda utilizando o useState e useRef. Você pode ler este artigo do Medium para ver como ficaria.

2
  • Obrigado, me ajudou bastante! Só estou tentando entender o 'oldCount'. No caso seria uma função de callback?
    – rmoraes
    Commented 27/03/2021 às 12:57
  • @rmoraes mais ou menos. A resposta que eu linkei explica bem sobre isso, e também tem a documentação. O que acontece é que quando você passa uma função para o setState, você ainda deve retornar o novo valor, mas recebe como parâmetro o valor antigo. Leia a documentação para entender melhor em quais casos isso pode ser importante. Commented 27/03/2021 às 14:16
3

Faltou gerenciar qual variável está armazenando o intervalo (o setInterval retorna um valor que é o intervalo criado e esse valor é utilizado para parar esse temporizador) e com a programação utilizando o Hook useRef consegue resolver o problema, no seu código tem alguns problemas também que são por exemplo na hora da atribuição do novo valor para o contador e também o intervalor como já relatado, um exemplo básico de solução:

function App() {
  const [count, setCount] = React.useState(0)
  const intervalRef = React.useRef(null);

  function showTimer() {
    setCount(state => state + 1); // ou setCount(state + 1);
  }

  function startTimer() {
    intervalRef.current = setInterval(showTimer, 1000);
  }

  function pauseTimer() {
    clearInterval(intervalRef.current);    
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={startTimer}>
        start
      </button>
      <button onClick={pauseTimer}>
        pause
      </button>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Um outro exemplo com algumas melhorias de tela, fazendo um toggle com os botões para visualmente saber o que está acontecendo no componente:

function App() {
  const [count, setCount] = React.useState(0)
  const [time, setTime] = React.useState(null);

  const showTimer = React.useCallback(() => {
    setCount(state => state + 1); // ou setCount(state + 1);
  })

  const startTimer = React.useCallback(() => {
    setTime(setInterval(showTimer, 1000));
  })

  const pauseTimer = React.useCallback(() => {
    clearInterval(time);    
    setTime(null);
  })

  return (
    <div>
      <p>{count}</p>
      <button onClick={startTimer} disabled={time !== null}>
        start
      </button>
      <button onClick={pauseTimer} disabled={time === null}>
        pause
      </button>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .