import React, { useRef, useEffect } from "react";

const Timer = () => {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      console.log("Um segundo se passou.");
    }, 1000);

    /*
      Tornamos o id do intervalo acessível para todo o componente.
      Se tivéssemos usado uma variável de estado para isso,
      componente seria renderizado novamente e isso causaria um loop infinito.
    */
    intervalRef.current = id;

    return () => clearInterval(intervalRef.current);
  });

  const handleCancel = () => clearInterval(intervalRef.current);

  return (
    <>
      //...
    </>
  );
}