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.
setInterval
, ele retorna um ID que identifica o intervalo criado. É esse ID que você precisa passar para a funçãoclearInterval
. Atualmente, você está passando uma função que não tem nada a ver com o queclearInterval
espera. Você pode utilizar uma referência (hookuseRef
) para manter e atualizar esse ID dentro do seu componente.