title: React set state error outside of componentDidMount
body: <p>Im getting an error <code>Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.</code> when I try to set state in my <code>retrieveRoleMembers</code> function not sure how to fix it, any feedback is appreciated!</p>
  <pre><code>class MainCard extends Component {
  state = {
      userResponseData:[] ,
      roleResponseDataID:[] 
  
  
  }
  
  handleChange = (tab) =&gt; {
  
      window.alert(`Tab changed to: ${tab}`);
  };
  
  retrieveRoleMembers(){
  
      var i,j;
      for (i = 0; i &lt; this.props.userRoleDataValue.length; i++) {
          if(this.props.userRoleDataValue[i].role_id === this.state.roleResponseDataID.id){
               for(j=0;j&lt;this.state.userResponseData.length;j++){
                   if(this.props.userRoleDataValue[i].user_id === this.state.userResponseData[j].id)
                   {
                        this.setState({ // This is where the error is happening
                          outputRoleMembers: this.state.userResponseData[j],
                        })
  
                   }
               }
  
  }}}
  componentDidMount() {
          this.props.getComponentById(VIEW_ROLES, Roles, this.props.searchValue.value).then(() =&gt; {
              return this.setState({ 
  
                  roleResponseDataID: this.props.roles.data,
                  cardHandle: false,
              })
              
          });
  
          this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users)
          .then(() =&gt; {
              return this.setState({
  
                  userResponseData: this.props.users.data,
              })
          });
  
  }
  render() {
      if (this.props.cardHandle) {
          return null
      }
      else {
  
          if (this.props.sendOptionSelected === 'Role') {
              this.retrieveRoleMembers()
              return (
                  &lt;Card mr={'0px'}&gt;
                      &lt;Tabs defaultActiveTab=&quot;Members&quot; onChange={this.handleChange} &gt;
                          {/* Group of tabs */}
                          &lt;Tabs.Tab label=&quot;Members&quot;&gt;Members&lt;/Tabs.Tab&gt;
                          &lt;Tabs.Tab label=&quot;Access&quot;&gt;Access&lt;/Tabs.Tab&gt;
  
                          {/* Tab panels */}
                          &lt;Tabs.Panel label=&quot;Members&quot;&gt;
                              &lt;Table
                                  data={Array.isArray(this.state.outputRoleMembers) ? this.state.outputRoleMembers : [this.state.outputRoleMembers]}
                                  defaultPageSize={[this.state.outputRoleMembers].length}
                                  columns={
                                      [
  
                                          {
                                              Header: 'Fisrt Name',
                                              accessor: 'first_name'
                                          },
                                          {
                                              Header: 'Last Name',
                                              accessor: 'last_name'
                                          }
  
                                      ]
                                  }
                                  sortable={false}
                                  resizable={false}
                                  showPagination={false}
                                  onSortedChange={() =&gt; { }}
                              /&gt;
                          &lt;/Tabs.Panel&gt;
                      &lt;/Tabs&gt;
                  &lt;/Card&gt;
              )
          }
      }
  }
  
  
  const mapStateToProps = state =&gt; {
          return {
              roles: state.roles.item,
              users: state.users
          }
      }
      export default connect(mapStateToProps, { getComponentById,fetchComponent })(MainCard);
  </code></pre>
  <p>and when I change <code>retrieveRoleMembers</code> to look like so, my code works but when I inspect the console log I see a infinite loop / renders for <code>VIEW_DBUSERS</code></p>
  <pre><code>retrieveRoleMembers(){
          var i;
          for (i = 0; i &lt; this.props.userRoleDataValue.length; i++) {
              if(this.props.userRoleDataValue[i].role_id === this.state.roleResponseDataID.id){
                   this.props.getComponentById(VIEW_DBUSERS, users, this.props.userRoleDataValue[i].user_id).then(() =&gt; {
                      return this.setState({
                          outputRoleMembers: this.props.users.data,
                     })
                  });
  
      }}}
  </code></pre>