Q: React setState inside solidity contract instance promises I deployed a solidity contract to my local testrpc blockchain. All my contract method tests check out, but handling Web3 transactions and updating state accordingly is giving me trouble.
When I add a user account, my next operation is to return all user accounts for my contract. and well...update my state (RegisteredAccounts).
However, through my chain of promises I'm not seeing my states update. I understand setState is asynchronous too, so how can I see my states update without refreshing the page or calling ComponentDidMount()?
Here is my Solidity Accounts Contract (the parts that I've handled so far
pragma solidity ^ 0.4.4;
contract Accounts {

  mapping(address => User) public mUsers;
  address[] public Users; //users whitepages

  struct User {
    string handle;
    bytes32[] taskList;
  }

  function addNewUser(string _handle) returns(bool success) {
    address newUserAddr = msg.sender;

    //if handle not in userAddresses & the handle is not null
    if (bytes(mUsers[newUserAddr].handle).length == 0 && bytes(_handle).length != 0) {
      mUsers[newUserAddr].handle = _handle;
      Users.push(newUserAddr);
      return true;
    } else {
      return false;
    }
  }

  function getUsers() constant returns(address[]) {
    return Users;
  }
}

Here is my App container component -- relevant parts
registerNewUser() is my problem child right now.
class App extends Component {
  state = {
    modalOpen: false,
    SenderAddress: null,
    RegisteredAccounts: [],
    isRegisteredUser: false,
    SenderTaskList: [], //not set
    AccountsCtrct: null,
    web3: null
  }
  //#region APP METHODS
  componentWillMount() {
    // Get network provider and web3 instance. -- See utils/getWeb3 for more info.
    getWeb3.then(results => {
      this.setState({
        web3: results.web3
      })
      this.instantiateContracts() //instantiate contract
    }).catch(() => {
      console.log('Error finding web3.')
    })
  }


  instantiateContracts() {
    this.setState({
      AccountsCtrct: contract(AccountsContract)
    })
    this.state.AccountsCtrct.setProvider(this.state.web3.currentProvider)

    //Get block chain addresses --- only returns the current address selected in metamask (web3 current addr)
    this.state.web3.eth.getAccounts((error, accounts) => {
      this.setState({
        SenderAddress: accounts[0]
      })

      //INIT ACCOUNTS CONTRACT
      var acctDeployed = this.state.AccountsCtrct.deployed()
      acctDeployed.then((instance) => {
        return instance.getUsers();
      }).then((res) => {
        this.setState({
          RegisteredAccounts: res
        })

        if (this.state.RegisteredAccounts.includes(this.state.SenderAddress)) {
          this.setState({
            isRegisteredUser: true
          })
        }
      })
    })
  }


  registerUser = (handle) => {
    var acctInstance
    this.state.AccountsCtrct.deployed().then((inst) => {

      //add current user to this account
      acctInstance = inst
      return acctInstance.addNewUser(handle, {
        from: this.state.SenderAddress
      });
    }).then(() => {

      //now we added our user -- update registeredAccounts setState
      //pass response users array to promise
      return acctInstance.getUsers()
    }).then(res => {

      this.setState({
        RegisteredAccounts: res
      })
      if (res.includes(this.state.SenderAddress)) {
        this.setState({
          isRegisteredUser: true
        })
      }
    })
  }

  toggleModal = () => {
    this.setState(prevState => ({
      modalOpen: !prevState.modalOpen
    }));
  }
  //#endregion
  
  render() {
    return (
      <div className="App">
        <nav className="navbar pure-menu pure-menu-horizontal">
            <a href="#" className="pure-menu-heading pure-menu-link">Truffle Box</a>
            {
              !this.state.isRegisteredUser
              ? <a style={navLink} onClick={ this.toggleModal } href="#" className="pure-menu-heading pure-menu-link">Register</a>
              : null
            }
        </nav>

        <ModalUserNav visible={this.state.modalOpen}
              toggleModal={this.toggleModal}
              isRegistered={this.state.isRegisteredUser}
              registerUser={this.registerUser} />
    );
  }
}

Last my Child component
class ModalUserNav extends Component {
  state = {
    unpl: "UserName",
    pwpl: "Password",
    errorCode: 'Registration Failed',
    errorVisible: false
  }


  handleOnChangePL = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleSubmit = () => {
    if (this.state.unpl !== "") {
      this.props.registerUser(this.state.unpl)
      this.props.toggleModal();
    } else {
      //if the input is empty update the error code and show
      console.log('registration failed!')
      this.setState({
        errorCode: 'REGISTRATION ERR: empty handles are not allowed!',
        errorVisible: true
      })
    }
  }

  render() {
    return (
      <section>
          <Modal visible={this.props.visible} effect="fadeInUp">
            <div className="pure-form">
              <fieldset style={modalFormView}>
                <legend style={{fontSize: "18px"}}><b>Register now. All you need is a handle!</b></legend>
                <div className="flexContainer">
                  <input style={{marginTop: "7px", height: "2.6em", marginLeft: "5px", marginRight: "5px"}} type="text" name="unpl" placeholder={this.state.unpl} onChange={(event) => {this.handleOnChangePL(event)}} value={this.state.unpl} />
                  <button style={btnStyle} type="submit" className="pure-button pure-button-primary" onClick={() => {this.handleSubmit()}}><b>Register</b></button>
                </div>
              </fieldset>
            </div>
          </Modal>
      </section>
    )
  }
}

In short, I want to follow up my 2 asynchronous tasks (addNewUser, getUsers) with a setState so I can automatically change my UI without refreshing. So what am I doing wrong?

A: You should move instantiateContracts to setState because setState does not update data immediately. https://reactjs.org/docs/react-component.html#setstate
  this.setState({
    web3: results.web3
  }, () => {
    this.instantiateContracts() //instantiate contract
  })

Update 1: About registerUser: It should be
  this.setState({
    RegisteredAccounts: res
  }, () => {
    if (res.includes(this.state.SenderAddress)) {
      this.setState({
        isRegisteredUser: true
      })
    }
  })

