title: My React state variables are empty in callback when a solidity event gets fired
body: <p>I am using <code>react</code> with <code>truffle/ganache</code>. I have defined some events in my smart contract that fire when certain things happen. I have a react component dedicated to handling the contract instance and its events. Here's a trimmed down version that shows the issue I am having...</p>
  <pre><code>import React, {useState, useEffect} from &quot;react&quot;;
  import Client from '../build/contracts/Client.json'
  
  const ClientBugDemo = (props) =&gt; {
  
      /**
       * props contains... 
       * contractAddress
       * web3
       */
  
      const [contractAddress, setContractAddress] = useState(0);
      useEffect(()=&gt;{},[contractAddress]);
  
      const [contractInstance, setContractInstance] = useState(0);
      useEffect(()=&gt;{},[contractInstance]);
  
      const [name, setName] = useState(&quot;&quot;);
      useEffect(()=&gt;{},[name]);
  
      function _getContractInstance(address, web3){
          var instance = new web3.eth.Contract(
              Client.abi,
              address,
          );
          return instance;
      }
  
      if (contractAddress === 0){
          if (props.contractAddress){
              setContractAddress(props.contractAddress);
  
              var instance = _getContractInstance(props.contractAddress, props.web3);
              setContractInstance(instance);
  
              instance.events.MyCustomEvent(ev_MyCustomEventHandler);
  
              instance.methods.getName()
              .call()
              .then((_name, err)=&gt;{
                  if (err){
                      console.log(&quot;error : &quot;, err);
                  }
                  else {
                      setName(_name);
                  }
              });
      
          }
      }
  
      function ev_MyCustomEventHandler(error, event){
          console.log(&quot;Why is my contract Instance empty? &quot;, contractInstance);
          console.log(&quot;But my props are fine? &quot;, props.contractAddress);
      }
      
      return (
          &lt;div&gt;
              &lt;div&gt;Contract Address = {contractAddress}&lt;/div&gt;
              &lt;div&gt;Name = {name}&lt;/div&gt;
              &lt;div&gt;Have Contract = {contractInstance?&quot;Yes&quot;:&quot;No&quot;}&lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default ClientBugDemo;
  </code></pre>
  <p>I create one of the above components for my Client contract and give it a valid <code>contractAddress</code> and <code>web3</code> object.</p>
  <p>It successfully loads and shows the contract address, name and I can see the contract instance is valid. All is good and I have a working component.</p>
  <pre><code>Contract Address = 0x64cCa2C98c13bB06e7D5b35Ae3af03B4A4C4ec71
  Name = Taylor
  Have Contract = Yes
  </code></pre>
  <p>Then the custom event fires and the handler <code>ev_MyCustomEventHandler</code> gets called as expected.</p>
  <p>The problem is that my local <code>contractAddress</code> value is zero during that function call. In fact, as far as I can tell, all my local state variables in React are in their empty state as though the component is being re-rendered. However <code>props</code> has its original values.</p>
  <p>So my console log shows</p>
  <pre><code>Why is my contract Instance empty? 0
  But my props are fine? 0x64cCa2C98c13bB06e7D5b35Ae3af03B4A4C4ec71
  </code></pre>
  <p>I have tried myriad things including refactoring components thinking that maybe the state is somehow persisted when the Event handler is assigned. I really can't get this to work.</p>