title: Why debouce function prints the value differently in textbox?
body: <p>Problem:
  In the code below, I tried to type &quot;red&quot; continuously and after 2 seconds, <code>&quot;red&quot;</code> appeared in the textbox. Then, after a few seconds, I tried to type &quot;re&quot; continuously. Now, after 2 seconds I got &quot;STACK OVERFLOW DOES NOT ALLOW ME PROVIDE OUTPUT HERE&quot;.</p>
  <p>Please try it yourself.</p>
  <pre><code>
      import React from 'react';
      import { useCallback, useEffect, useState } from 'react';
      import './style.css';
      
      export default function App() {
        const [inputValue, setInputValue] = useState('');
      
        
      
      function debouce(fn) {
          let timeout;
        return function() {
          console.log(&quot;final&quot;, arguments[0])
          clearTimeout(timeout);
          timeout = setTimeout(() =&gt; fn.apply(this, arguments), 1000);
        };
        }
      
        const getvalue = debouce(setInputValue);
      let a = &quot;&quot;;
        const handleChange = useCallback((e) =&gt; {
          const value = e.target.value;
          a = a+ value;
          console.log('targetvalue', a);
          getvalue(a);
        }, []);
      
        return (
          &lt;div&gt;
            &lt;input onChange={handleChange} value={inputValue} /&gt;
            &lt;h1&gt;Hello StackBlitz!&lt;/h1&gt;
            &lt;p&gt;Start editing to see some magic happen :)&lt;/p&gt;
          &lt;/div&gt;
        );
      }
  
  </code></pre>
  <p>Demo link: <a href="https://stackblitz.com/edit/react-nh3ty2" rel="nofollow noreferrer">https://stackblitz.com/edit/react-nh3ty2</a></p>
  <p>Why? Can anyone explain please how to do it correctly as well</p>
  <p>UPDATE: i understood that debouce decorator cannot be altered for the required criteria so im changing from below code</p>
  <pre><code>function debouce(fn) {
      let a = '',
        timerid;
      return function (e) {
        a = a + e;
        clearTimeout(timerid);
        timerid = setTimeout(function () {
          fn.apply(this, [a]);
          a = '';
        }, 2000);
      };
    }
  </code></pre>
  <p>to this</p>
  <pre><code>function debouce(fn) {
      let timeout;
    return function() {
      clearTimeout(timeout);
      timeout = setTimeout(() =&gt; func.apply(this, arguments), ms);
    };
    }
  </code></pre>