title: Why are my React state values not updating synchronously?
body: <p>I am trying to create the logic for a card matching game using React. Each card component has a flip value that should update whenever the onClick method is activated. onClick should also update the current turn and save the className to either idA or idB. </p>
  
  <p>However, the cards only begin to update their <code>setIsFlipped</code> value once the IDs are set. </p>
  
  <pre><code>export const Card = ({
    className,
    flipKey,
    setIDA,
    setIDB,
    idB,
    idA,
    turn,
    setTurn
  }) =&gt; {
    const [flipID, setFlipID] = useState("");
  
    const [isFlipped, setIsFlipped] = useState(false);
  
    useEffect(() =&gt; {
      if (flipID === flipKey) setIsFlipped(true);
    }, [flipID]);
  
    function onClick() {
      setFlipID(flipKey);
      if (turn === 0 || turn === 1) {
        turn ? setIDB(className) : setIDA(className);
        setTurn(turn + 1);
      }
    }
  
    var classNameString = "card " + className;
  
    return (
      &lt;&gt;
        {turn}
        {idA}
        {idB}
        {isFlipped ? &lt;p&gt; Flipped &lt;/p&gt; : &lt;p&gt;Not Flipped&lt;/p&gt;}
        &lt;button onClick={onClick}&gt;
          &lt;div className={classNameString} /&gt;
        &lt;/button&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>The first click updates <code>turn</code> and <code>idA</code>. The second click updates <code>turn</code> and <code>idB</code>.</p>
  
  <p>After <code>turn == 2</code>the if statement in <code>function onClick()</code> stops executing and additional button clicks will cause <code>setFlipId(flip)</code> to work. I have tried calling <code>setIsFlipped(true)</code> inside of <code>function onClick()</code> (instead of matching IDs using <code>useEffect</code>) and I got the same results.</p>
  
  <p>Considering that eventually <code>flip</code> will be tied to animation transformations I feel quite stuck until I can resolve this problem. </p>