title: React calling callback interferes with useState
body: <p>I have a page that has an array of child components (Card). In the parent, I save in state how many cards have been clicked. So each card has a callback function that when clicked updates the variable. That works ok, except that I also save in local state for each card whether they have been clicked or not (they flip over when clicked). But when I call the callback, updating the local state doesn't work (or the component gets reset, or I don't know what happens), but it doesn't update the local state.</p>
  <p>Parent:</p>
  <pre class="lang-js prettyprint-override"><code>export default function Game() {
    const [flipState, setFlipState] = useState(0);
    function flipCallback() {
      if (flipState == 0) {
        setFlipState(1);
      } else if (flipState == 1) {
        setFlipState(2);
      } else if (flipState == 2) {
        setFlipState(0);
      }
    }
    let tileOrder = [...Array(36).keys()];
  
    let cards = tileOrder.map((e, i) =&gt; (
      &lt;Card
        key={&quot;card&quot; + i + &quot;-&quot; + e}
        iconSet={1}
        index={i}
        speed={1}
        callback={() =&gt; {
          flipCallback();
        }}
        state={flipState}
      /&gt;
    ));
  
    return (&lt;div&gt;{cards}&lt;/div&gt;);
  }
  </code></pre>
  <p>The child:</p>
  <pre class="lang-js prettyprint-override"><code>export default function Card({ iconSet, index, speed, callback, state }) {
    const [isFlipped, setFlipped] = useState(false);
  
  const handleFlip = () =&gt; {
      if (isFlipped === false &amp;&amp; (state === 0 || state === 1)) {
        callback();
        setFlipped(true);
        console.log(isFlipped); // This is false, unless I comment out the callback above
        if (state == 2) {
          setTimeout(() =&gt; {
            setFlipped(false);
          }, speed * 1000);
        }
      }
    };
  
    const statusUpdate = useCallback(() =&gt; {
      if (isFlipped &amp;&amp; state == 2) {
        setTimeout(() =&gt; {
          setFlipped(false);
          callback();
        }, speed * 1000);
      }
    }, [isFlipped, speed, state, callback]);
  
    useEffect(() =&gt; {
      let isMounted = true;
      if (isMounted) {
        setCardState(state);
        statusUpdate();
      }
      return () =&gt; {
        isMounted = false;
      };
    }, [state, statusUpdate]);
  
    return (
      &lt;ReactCardFlip isFlipped={isFlipped} flipDirection=&quot;horizontal&quot;&gt;
        &lt;button onClick={handleFlip}&gt;
          Blank
        &lt;/button&gt;
        &lt;button&gt;{index}&lt;/button&gt;
      &lt;/ReactCardFlip&gt;
    );
  }
  </code></pre>