title: why this onChange method has invoked several times(infinity) and how to fix this?
body: <p>actually, I am new to React and I am trying to put debouncing along with the event method(onChange) in input to make the code optimized, but when the event occurs instead of calling the function for one time it calls several times(up to infinity).</p>
  <pre><code>import { useRef } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  export default function App() {
  
    var input_ref = useRef(null)
    
  //.............Debouncing........................................................
  
    var debouncing = (callback,threshold)=&gt;{
      var timer;
      return function(){
          const context = this
  
          if(timer)clearTimeout(timer);
          timer = setInterval(()=&gt;{
              timer = null;
              callback.apply(context);
              //callback()
          },threshold);
      }
  }
  
  //........EventHandler with Debouncing............................................
  
  var search_data = debouncing(()=&gt;{
      console.log(input_ref.current.value)
  },300)
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;input type=&quot;text&quot; name='searchBox' placeholder=&quot;search&quot; ref={input_ref} onChange={search_data}/&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>link (CodeSandbox):- <a href="https://codesandbox.io/s/debouncing-testing-gxc031?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/debouncing-testing-gxc031?file=/src/App.js</a></p>