title: How to debounce a callback in functional component using hooks
body: <p>How can I get actual prop values in React Functional Component debounced callbacks, It worked in React Class Component, but I have no idea how to reach this behavior in functional component using hooks.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import debounce from "lodash.debounce";
  
  const TestFunc = ({ count, onClick }) =&gt; {
    const handleClick = debounce(() =&gt; {
      onClick();
      console.log(count);
    }, 500);
  
    return (
      &lt;div&gt;
        &lt;button type="button" onClick={handleClick}&gt;
          Func: {count}
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  class TestClass extends React.Component {
    handleClick = debounce(() =&gt; {
      this.props.onClick();
      console.log(this.props.count);
    }, 500);
  
    render() {
      return (
        &lt;div&gt;
          &lt;button type="button" onClick={this.handleClick}&gt;
            Class: {this.props.count}
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const App = () =&gt; {
    const [countClass, setCountClass] = React.useState(0);
    const [countFunc, setCountFunc] = React.useState(0);
  
    return (
      &lt;div&gt;
        &lt;TestFunc count={countFunc} onClick={() =&gt; setCountFunc(countFunc + 1)} /&gt;
        &lt;TestClass
          count={countClass}
          onClick={() =&gt; setCountClass(countClass + 1)}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>When you click on functional component button, it logs the previous <code>count</code> prop value to console, but it's already changed by calling <code>onClick</code> handler, in the same time the class component button would log the actual <code>count</code> prop value after it was incremented by <code>onClick</code> handler. So, how can I get actual prop values in functional component?</p>