title: how can i stop this counter and put the final value in databases using react js axios
body: <p>i need a help please i am new in reactjs
  how can i stop this counter and put the final value in databases using  react js axios</p>
  <p>the code
  <a href="https://codesandbox.io/s/react-hook-counter-c2cei?file=/src/index.js:24-43" rel="nofollow noreferrer">https://codesandbox.io/s/react-hook-counter-c2cei?file=/src/index.js:24-43</a></p>
  <pre><code>import React, { useState, useRef, useEffect } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  import &quot;./styles.css&quot;;
  
  function Counter() {
    const [counter, setCounter] = useState(0);
  
    useInterval(() =&gt; setCounter(counter + 1), 1000);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h2&gt;Counter: {counter}&lt;/h2&gt;
        &lt;button type=&quot;button&quot; onClick={() =&gt; setCounter(0)}&gt;
          Reset
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  function useInterval(callback, delay) {
    const savedCallback = useRef();
  
    useEffect(() =&gt; {
      savedCallback.current = callback;
    }, [callback]);
  
    useEffect(() =&gt; {
      function runCallback() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(runCallback, delay);
        return () =&gt; clearInterval(id);
      }
    }, [delay]);
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;Counter /&gt;, rootElement);
  
  </code></pre>