title: React, useEffect only when 2 elements of dependency array are updated
body: <p>I have a React table component where both <code>Column</code> component and a button component rendered inside a column, triggers some function. Example of the table:</p>
  <pre><code>    &lt;Table&gt;
        &lt;Column onCellClick={handleCell}&gt;
          &lt;button onClick={handleButton} /&gt;
        &lt;/Column&gt;
      &lt;/Table&gt;
  </code></pre>
  <p>Those 2 handle functions are called at the same click, and they trigger some <code>useStates</code>:</p>
  <pre><code>    const [cell, setCell] = useState(false);
      const [buttonValue, setButtonValue] = useState(false);
  
      const handleCell = (value) =&gt; setCell(value)
      const handleButton = (value) =&gt; setButtonValue(value)
  </code></pre>
  <p>SO I have a <code>useEffect</code> that must trigger some code ONLY when both <code>cell</code> and <code>buttonValue</code> are updates. Currently I have something like:</p>
  <pre><code>    useEffect(() =&gt; {
        if (cell &amp;&amp; buttonValue) {
          // some code
          setAnotherState(etc)
        }
      }, [cell, buttonValue]);
  </code></pre>
  <p>My problem is if I click very quickly or in random scenarios, the <code>setAnotherState</code> is called before the <code>buttonValue</code> or <code>cell</code> are actually updated. With that <code>if</code> inside the useEffect, it will work correctly only the very first time that I actually update both values, because they both are initialized as <code>false</code>, but then, with many clicks, there are some outdated set states.</p>
  <p>Any hint? how could I ensure that both states actually update before executing the code inside the <code>if</code>?</p>
  <p>I can't remove any of that 2 onClick or onCellClick, they both have different and specific values for their components, so I need them both.</p>