title: Adding seconds to Intl.dateTimeFormat with React useEffect, useState, and setInterval
body: <p>I have come across a weird problem where changing the order of a clone inside a setState() hook function changes the expected behavior.</p>
  <p>I am trying to add one second to the value each second. However doing this directly causes the seconds to increase by two instead of one.</p>
  <p>This works</p>
  <pre><code>const [value, setValue] = useState(new Date());
  
  useEffect(() =&gt; {
    const interval = setInterval(
    () =&gt;
      setValue((value) =&gt; {
        const clonedDate = new Date(value.getTime());
        clonedDate.setSeconds(clonedDate.getSeconds() + 1); // Add one second to the time
        return clonedDate;
      }),
    1000
    );
    return () =&gt; {
      clearInterval(interval);
    };
  }, []);
  </code></pre>
  <p>This adds two seconds instead of one</p>
  <pre><code>const [value, setValue] = useState(new Date());
  
  useEffect(() =&gt; {
    const interval = setInterval(
    () =&gt;
      setValue((value) =&gt; {
        value.setSeconds(value.getSeconds() + 1);
        const clonedDate = new Date(value.getTime());
        return clonedDate;
      }),
    1000
    );
    return () =&gt; {
      clearInterval(interval);
    };
  }, []);
  </code></pre>