title: lodash debounce render does not work, accumulates and then is called many times
body: <p>Now the renderer works in this way, with each input of a value, it waits one second and then it is called, and it turns out that it can be called many times in a row. What needs to be done is that when the user has finished typing, the Testrender function is called only once, now it is called many times during typing</p>
  <p>I do not understand why, when passing data between components, the function works without delay and does not maintain its purpose</p>
  <p><a href="https://codesandbox.io/s/blissful-meadow-o7bbqd?file=/src/components/Testrender/index.tsx:135-145" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-meadow-o7bbqd?file=/src/components/Testrender/index.tsx:135-145</a></p>
  <pre><code>import { useState } from &quot;react&quot;;
  import Input from &quot;./Input&quot;;
  import Testrender from &quot;./Testrender&quot;;
  
  const Main_page = () =&gt; {
    const [count, setCount] = useState(&quot;&quot;);
  
    return (
      &lt;&gt;
        &lt;Input count={count} setCount={setCount} /&gt;
        &lt;Testrender count={count} /&gt;
      &lt;/&gt;
    );
  };
  
  export default Main_page;
  </code></pre>
  <p>--</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  interface Props {
    count: string;
    setCount: (searchString: string) =&gt; void;
  }
  
  const Input = ({ count, setCount }: Props) =&gt; {
    return (
      &lt;div&gt;
        &lt;input
          className=&quot;test-input&quot;
          value={count}
          onChange={(e) =&gt; setCount(e.target.value)}
          placeholder=&quot;test render&quot;
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Input;
  </code></pre>
  <p>--</p>
  <pre><code>import React, { useCallback, useEffect } from &quot;react&quot;;
  import { debounce } from &quot;lodash&quot;;
  
  interface Props {
    count: string;
  }
  
  const Testrender = ({ count }: Props) =&gt; {
    const request = debounce((stateValue: any) =&gt; {
      console.log(&quot;render&quot;);
    }, 1000);
  
    const changes = useCallback(request, [count]);
  
    useEffect(() =&gt; {
      changes(count);
    }, [count]);
  
    return &lt;div&gt;index&lt;/div&gt;;
  };
  
  export default Testrender;
  </code></pre>