title: React hooks: Set state 'ModalVisible' but state does not update immediately
body: <p>I use setModalConfirmVisible(true) but the state modalConfirmVisible does not update immediately. So, Modal does not display.</p>
  
  <p>How can I update this state immediately?</p>
  
  <p><img src="https://i.stack.imgur.com/amYIw.gif" alt="See happened">
  When I click Remove button. The console will show only false from</p>
  
  <blockquote>
    <p>console.log(modalConfirmVisible)</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>  useEffect(() =&gt; {
      (async () =&gt; {
        try {
          setFetchLoading(true)
          setTransactions(await fetchTransactions())
          setFetchLoading(false)
        } catch (err) {
          console.error(err)
        }
      })()
    }, [modalConfirmVisible])
  
    async function handleRemoveTransaction(id) {
      setRemoveLoading(true)
      setModalConfirmVisible(true)
      console.log(modalConfirmVisible)
      await handleConfirmRemoveTransaction(true, id)
    }
  
  
    return (
      {modalConfirmVisible &amp;&amp; (
        &lt;ModalConfirm
          onConfirmRemove={handleConfirmRemoveTransaction}
          onCancel={() =&gt; setModalConfirmVisible(false)}
          visible={true} 
        /&gt;
      )}
    )
  
  
  // ModalConfirm.js
  const ModalConfirm = ({ onConfirmRemove, visible }) =&gt; {
    return (
      &lt;Modal
        visible={visible}
        title="Do you want to delete these items?"
        icon={&lt;ExclamationCircleOutlined /&gt;}
        content="When clicked the OK button, this dialog will be closed after 1 second"
        onOk={() =&gt; onConfirmRemove(true)}
        onCancel={() =&gt; onConfirmRemove(false)}
      /&gt;
    )
  }
  </code></pre>