title: Why is passing function argument to React.useState and the return function will return stale value
body: <p>Give the codes below</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  export default function App() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);
  
    const inc1 = () =&gt; {
      console.log(&quot;debug inc:&quot;, count1);
      setCount1((prev) =&gt; prev + 1);
    };
  
    const inc2 = () =&gt; {
      console.log(&quot;debug inc2:&quot;, count2);
      setCount2(count2 + 1);
    };
  
    const [processInc1] = useState(() =&gt; {
      console.log(&quot;debug longProcessBeforeInc:&quot;, count1);
      // Run some long process here
      return inc1;
    });
  
    const [processInc2] = useState(() =&gt; {
      console.log(&quot;debug longProcessBeforeInc:&quot;, count2);
      // Run some long process here
      return inc2;
    });
  
    console.log(&quot;debug render:&quot;, count1, count2);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h3&gt;
          {count1} - {count2}
        &lt;/h3&gt;
        &lt;button onClick={inc1}&gt;Inc 1&lt;/button&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;button onClick={inc2}&gt;Inc 2&lt;/button&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;button onClick={processInc1}&gt;Long Inc 1&lt;/button&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;button onClick={processInc2}&gt;Long Inc 2&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><code>inc1</code>, <code>inc2</code>, <code>processInc1</code> all works as expected where you increase value by 1 and it renders correctly.</p>
  <p>So with <code>inc1</code>, <code>inc2</code> the main difference is <code>setCount1((prev) =&gt; prev + 1);</code> and <code>setCount2(count2 + 1);</code>, and <code>processInc1</code>, <code>processInc2</code> basically return <code>inc1</code> and <code>inc2</code> respectively via useState first time the component renders.</p>
  <p>I understand from here <a href="https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function</a> that it has something to do with closure but given the example above I fail to wrap my head around why <code>inc2</code>, and <code>processInc1</code> works but not <code>processInc2</code>?</p>
  <p>Here is the link to the <code>codesandbox</code> for the above
  <a href="https://codesandbox.io/s/eloquent-morse-37xyoy?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/eloquent-morse-37xyoy?file=/src/App.js</a></p>