title: Analog clock app state stopping when submitting form
body: <p>I am working on this React app to make an Analog Clock with optional Inputs available to the user to change the color of the clock hands, clock border, etc.</p>
  <p>But when I try to press the submit button sometimes, the second hand stops moving all of a sudden and seems like the 'time' states are not changing. The colors however do always change as intended so color states do change.</p>
  <p>I tried to incorporate preventDefault() but it's a no go...</p>
  <p>The first code snippet is defining the hooks, second is the form and third is the main App js file. I didn't include the JS/CSS files that include the transform and styling info.</p>
  <pre><code>import { useEffect, useRef } from 'react';
   
  export const useInterval = (callback, delay) =&gt; {
      const savedCallback = useRef()
  
      // Remembers latest callback
      useEffect(() =&gt; {
          savedCallback.current = callback
      }, [callback])
  
      //Set-up the interval
      useEffect(() =&gt; {
          const tick = () =&gt; {
              savedCallback.current()
          }
          if (delay !== null) {
              let id = setInterval(tick, delay)
              return () =&gt; clearInterval(id)
          }
      }, [delay])
  }
  </code></pre>
  <pre><code>import React, { useState } from 'react';
  import './App.css';
  import './CustomForm.css';;
  
  function CustomForm(props) {
      const [options, setOptions] = useState(props.defaultOptions)
  
      const setClockColor = (event) =&gt; {
          event.preventDefault();
          let clockColors = { ...options.clockColors };
          clockColors[event.target.name] = event.target.value;
          setOptions({ ...options, clockColors });
      }
  
      const buildClock = (event) =&gt; {
          event.preventDefault();
          setTimeout(() =&gt; props.updateClock(options), 1000);
          
      }
  
      return (
          &lt;form onSubmit={(event) =&gt; buildClock(event)}&gt;
              &lt;div className='custom-title'&gt;Custom Analog Clock &lt;/div&gt;
              &lt;div className='all-hand-color-container'&gt;
                  &lt;div className='input-label-container'&gt;
                      &lt;input className='color-input' placeholder='Second-color' label='Second Hand Color' name='second' type='text' onChange={setClockColor} /&gt;
                  &lt;/div&gt;
                  &lt;div className='input-label-container'&gt;
                      &lt;input className='color-input' placeholder='Minute-color' label='Minute Hand Color' name='minute' type='text' onChange={setClockColor} /&gt;
                  &lt;/div&gt;
                  &lt;div className='input-label-container'&gt;
                      &lt;input className='color-input' placeholder='Hour-color' label='Hour Hand Color' name='hour' type='text' onChange={setClockColor} /&gt;
                  &lt;/div&gt;
                  &lt;div className='input-label-container'&gt;
                      &lt;input className='color-input' placeholder='Border-color' label='Border Color' name='border' type='text' onChange={setClockColor} /&gt;
                  &lt;/div&gt;
                  &lt;div className='input-label-container'&gt;
                      &lt;input className='color-input' placeholder='Base-color' label='Base Color' name='base' type='text' onChange={setClockColor} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className='custom-submit-button-container'&gt;
                  &lt;button  className='custom-submit-button' type='submit'&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          
  
      )
  }
  
  export default CustomForm;
  </code></pre>
  <pre><code>import React, { useState } from 'react';
  import { useInterval } from './Hook';
  import { ClockBase, Center, SecondHand, MinuteHand, HourHand } from './Components';
  import CustomForm from './CustomForm';
  import './App.css'
  
  
  const App = () =&gt; {
      const date = new Date();
      const [seconds, setSeconds] = useState(0)
      const [minutes, setMinutes] = useState(0)
      const [hours, setHours] = useState(0)
  
      const [options, setOptions] = useState({
          clockColors: {
              second: 'green',
              minute: 'blue',
              hour: 'red',
              border: 'gray',
              base: 'black'
          }
      })
  
      const updateClock = (new_options) =&gt; {
          setOptions({ ...new_options });
      }
  
  
      useInterval(() =&gt; {
          setSeconds(date.getSeconds())
          setMinutes(date.getMinutes())
          setHours(date.getHours() % 12 || 12)
      }, 1000 )
      
      return(
          
          &lt;div className='main-container'&gt;
              &lt;h1 className='form-container'&gt;
                  &lt;CustomForm defaultOptions={options} updateClock={updateClock} /&gt;
              &lt;/h1&gt; 
              &lt;div className='clock-container'&gt;
                  &lt;ClockBase color={options}&gt;
                      &lt;Center /&gt;
                      &lt;SecondHand fraction={seconds} color={options}/&gt;
                      &lt;MinuteHand fraction={minutes} color={options}/&gt;
                      &lt;HourHand fraction={hours} color={options}/&gt;
                  &lt;/ClockBase&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          
      )
  }
  
  
  
  export default App;
  </code></pre>