title: How to track failed login attempts during 10 sec
body: <p>So I'm doing a simple login form with a submit button.
  So idea is to track the failed attempts when a user tries to log in.
  If the user failed 5 attempts then submit button will be disabled for 30sec.
  So far it's pretty simple, but I'm trying to implement that button will be disabled only if those 5 attempts were during the 10sec. So I'm stacked here... Hope for your help folks!</p>
  <p>This is what I got so far</p>
  <pre><code>const [login, setLogin] = useState&lt;string&gt;('')
  const [error, setError] = useState&lt;string&gt;('')
  const [attempts, setAttempts] = useState&lt;number&gt;(0)
  
  useEffect(()=&gt;{
      if(attempts===5){
          setTimeout(()=&gt;{
              setAttempts(0)
          },1000)
      }
  },[attempts])   
  
  const onChangeHandler = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setLogin(e.target.value)
  }
  
  const useHandler = () =&gt; {
      setAttempts(prevState =&gt; prevState + 1)
      if (login === 'valid') {
          axios.get('https://api.github.com/users/anon').then(res =&gt; console.log(res.data))
          setError('')
          setAttempts(0)
      } else if (login !== 'valid') {
          if (attempts &gt;= 0 &amp;&amp; attempts &lt; 5) {
              setError('unsuccessful login attempt')
          }
      }
  }
  </code></pre>
  <p>and my return here is my return</p>
  <pre><code> &lt;div className=&quot;App&quot;&gt;
          &lt;div className={'loginBlock'}&gt;
              &lt;div&gt;
                  &lt;input name={'login'} value={login} type=&quot;text&quot;
                     onChange={onChangeHandler}/&gt;
                  &lt;button disabled={attempts === 5} onClick={useHandler}&gt;submit&lt;/button&gt;
              &lt;/div&gt;
              &lt;div style={{color: 'red'}}&gt;{error}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>