title: React setState inside useCallback() hook not setting state variable correctly?
body: <p>I have code that is of the following pattern inside a React FunctionComponent:</p>
  <pre><code>const MyComponent: React.FunctionComponent&lt;ISomeInterface&gt; = ({ someArray, someFunction }) =&gt; {
  
    const [someStateObjVar, setSomeStateObjVar] = React.useState({});
    const [isFound, setIsFound] = React.useState(false);
  
    const handleSomeEvent = React.useCallback((someAttribute: string) =&gt; {
      if (someAttribute) {
        setSomeStateObjVar(someArray.find(
          (arrayElement) =&gt; ( arrayElement.attribute === someAttribute )
        );
        setIsFound(someStateVar ?? false);
      }
    }
    
    return ( isFound &amp;&amp; someStateObjVar ) ? &lt;FoundMatchingComponent /&gt; ? &lt;ComponentNotFound /&gt;;
  </code></pre>
  <p>In the above code, there's always a match for someArray element with someAttribute.
  But the problem is MyComponent always renders ComponentNotFound because isFound always evaluates to FALSE at the last line (return statement).</p>
  <p>I was able to fix this with the following refactor below (inserting an intermediate variable, but overall the logic remains the same):</p>
  <pre><code>const MyComponent: React.FunctionComponent&lt;ISomeInterface&gt; = ({ someArray, someFunction }) =&gt; {
  
    const [someStateObjVar, setSomeStateObjVar] = React.useState({});
    const [isFound, setIsFound] = React.useState(false);
  
    const handleSomeEvent = React.useCallback((someAttribute: string) =&gt; {
      let foundElement;
      if (someAttribute) {
        foundElement = someArray.find(
          (arrayElement) =&gt; ( arrayElement.attribute === someAttribute )
        );
      }
      if (foundElement) {
        setSomeStateObjVar(foundElement);
        setIsFound(true);
      }
    }
    
    return ( isFound &amp;&amp; someStateObjVar ) ? &lt;FoundMatchingComponent /&gt; ? &lt;ComponentNotFound /&gt;;
  </code></pre>
  <p>With this 2nd version of the code, isFound correctly evaluates to TRUE at the last line, and MyComponent correctly renders FoundMatchingComponent.</p>
  <p>Can you please provide an explanation why the first version does not work, while the second one does?</p>
  <p>My guess is that the intermediate variable in the second version gives enough time for React to evaluate the isFound variable correctly at the return statement, but I'm not confident this is the explanation.  Any advice on improving my code above would be appreciated as well.  Thanks.</p>