React timer application I am writing a simple count down timer in React:

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import bootstrap from "bootstrap/dist/css/bootstrap.css";
import App from "./App";

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById("root")
);


App.js:

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

const App = () =&gt; {
  const oneSec = 1000;
  const [secCount, setSecCount] = useState(60);
  const [minCount, setMinCount] = useState(60);
  const [hrCount, setHrCount] = useState(24);

  useEffect(() =&gt; {
    const timer;    //&lt;= here is my problem.
    if (secCount &gt; 0) {
      timer = setInterval(() =&gt; {
        setSecCount(secCount - 1);
      }, oneSec);
    }
    if (secCount === 0 &amp;&amp; minCount &gt; 0) {
      timer = setInterval(() =&gt; {
        setSecCount(60);
      }, oneSec);
    }
    return () =&gt; clearInterval(timer);
  }, [secCount]);

  useEffect(() =&gt; {
    const timer =
      minCount &gt; 0 &amp;&amp;
      setInterval(() =&gt; {
        setMinCount(minCount - 1);
      }, 60 * oneSec);
    return () =&gt; clearInterval(timer);
  }, [minCount]);

  return (
    &lt;div&gt;
      {minCount}:{secCount}
    &lt;/div&gt;
  );
};

export default App;


I am having a hard time with my useEffect hooks. The first useEffect hook is supposed to update the second field, the logic is simply: 


if secCount is bigger than 0, continue to countdown every second
if secCount is zero and minCount is bigger than 0, reset secCount to 60 and continue to countdown.


But since there are two branches in my first useEffect hook, I need to declare the timer variable and reassign it later. Can I get away with declaring it as let timer? A const variable does not allow me to change its value.
let vs const is fundamentally an ES6+ issue:



constCreates a constant whose scope can be either global or local to the block in which it is declared. An initializer for a constant is required. You must specify its value in the same statement in which it's declared.


// wrong
const timer;
// Uncaught SyntaxError: Missing initializer in const declaration

// right
const timer = 60;



letAllows you to declare variables that are limited to a scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. Please note that a let variable is initialized to a value only when a parser evaluates it.


function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
};


With that said, change the declaration to let timer;

// Within the first `useEffect`
useEffect(() =&gt; {
     let timer; // change this
     if (secCount &gt; 0) {
       timer = setInterval(() =&gt; {setSecCount(secCount - 1)}, oneSec);
     }
     if (secCount === 0 &amp;&amp; minCount &gt; 0) {
       timer = setInterval(() =&gt; {setSecCount(60)}, oneSec);
     }
     return () =&gt; clearInterval(timer);
   }, [secCount]);
```