title: Stop rendering session during breaks
body: <p>I'm trying to make a Pomodoro timer and I'm almost done but I've been stuck on one thing for so long. I am trying to make it so that after every session and break, the session increases by 1 instead of by 2. I've made a bandaid by saying increase by .5 but I want to fix it with some kind of logic</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  function Pomodoro() {
    const [minutes, setMinutes] = useState(25);
    const [seconds, setSeconds] = useState(0);
    const [displayMessage, setDisplayMessage] = useState(false);
    const [session, setSession] = useState(1);
  
    useEffect(() =&gt; {
      let interval = setInterval(() =&gt; {
        clearInterval(interval);
  
        
  
        if (seconds === 0 &amp;&amp; minutes !== 0) {
          setSeconds(59);
          setMinutes(minutes - 1);
        } else if (seconds === 0 &amp;&amp; minutes === 0) {
          let breakTime = session % 4 === 0 ? 14 : 4;
          let minutes = displayMessage ? 24 : breakTime;
          let seconds = 59;
  
  
          if (displayMessage) setSession(prev =&gt; prev + .5);
          
          setSeconds(seconds);
          setMinutes(minutes);
          setDisplayMessage(!displayMessage);
        } else {
          setSeconds(seconds - 1);
        }
      }, 1000);
    }, [seconds, displayMessage, minutes, session,]);
  
    const timerMinutes = minutes &lt; 10 ? `0${minutes}` : minutes;
    const timerSeconds = seconds &lt; 10 ? `0${seconds}` : seconds;
    return (
      &lt;div className=&quot;pomodoro&quot;&gt;
        &lt;div&gt; Session: {session} &lt;/div&gt;
        &lt;div className=&quot;message&quot;&gt;
          {displayMessage &amp;&amp; &lt;div&gt;Break time! New Session starts in:&lt;/div&gt;}
        &lt;/div&gt;
        &lt;div className=&quot;timer&quot;&gt;
          {timerMinutes}:{timerSeconds}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Pomodoro;
  </code></pre>