title: How can I insert a reduxForm component without starting too many calls
body: <p>I am using a MERN stack overall, but I think this question only applies to react and redux form.</p>
  
  <p>Whenever I include a form to add an item within my user dashboard, I end up getting 
  <code>
  Uncaught 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></p>
  
  <p>First, I am not calling componentWillUpdate or componentDidUpdate explicitly at all, so I am having trouble finding the issue. If I stop the development server, with say <code>CTRL+C</code> it sometimes renders the (now unusable) form for me. </p>
  
  <p>I tried (all failed):</p>
  
  <ul>
  <li>to just include the form with no handlers </li>
  <li>to include the form and handle it on the dashboard</li>
  <li>to include the form and handle it on the form</li>
  <li>to remove all calls to <code>bind(this)</code> based on this <a href="https://stackoverflow.com/questions/40461770/redux-form-register-field-unregister-field-get-called-after-change-or-focus-e#45161379">somewhat similar problem</a></li>
  </ul>
  
  <p>I have similar redux-forms (handled in their containers) that work fine for signup and signin</p>
  
  <p><strong>UserDashboard.js</strong> where the error happens when I add a form and works fine without it</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  import * as actions from '../../actions';
  import Cupcakes from './cupcakes';
  import Monkeys from './monkeys';
  import AddMonkeyForm from './add_monkey_form'
  
  
  class UserDashboard extends Component {
  
  
      // handleSubmit({name}) {
      //     console.log("handleSubmitMonkey with", {name})
      //   //this.props.createMonkey({user, name})
      // }
  
      render() {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="section"&gt;
                      &lt;h1&gt;Hi: {this.props.user.name}&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div className="section"&gt;
                      &lt;h2&gt;Monkeys&lt;/h2&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col m6 s12"&gt;
                          &lt;h4&gt;Add a new monkey&lt;/h4&gt;
                          &lt;AddMonkeyForm /&gt; // If I take this out, everything works, it fails whether or not I add a handle submit function
                          &lt;/div&gt;
                          &lt;div className="col m6 s12"&gt;Existing monkeys&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="section"&gt;
                      &lt;h2&gt;Cupcakes&lt;/h2&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col m6 s12"&gt;Add a new cupcake&lt;/div&gt;
                          &lt;div className="col m6 s12"&gt;Existing cupcakes&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      const user = state.auth.user;
      const cupcakes = state.userdata.cupcakes;
      const monkeys = state.userdata.monkeys;
      return { user: user, monkeys: monkeys, cupcakes: cupcakes };
  }
  
  export default connect(mapStateToProps, actions)(UserDashboard);
  
  // &lt;AddMonkeyForm onSubmit={this.handleSubmit.bind(this)}/&gt;
  </code></pre>
  
  <p><strong>AddMonkeyForm.js</strong> that causes the error - this one fails whether I try to call handlesubmit in AddMonkeyForm or in UserDashboard or not at all.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { reduxForm, Field } from 'redux-form';
  import { connect } from 'react-redux';
  
  import renderTextField from '../helpers/form_helpers';
  import { createMonkey } from '../../actions';
  
  class AddMonkeyForm extends Component {
      onSubmit(values) {
          console.log('trying to submit MONKEY');
          // this.props.createMonkey(values, () =&gt;{
          //     this.props.history.push('/');
          // });
      }
      render() {
          const { handleSubmit } = this.props;
  
          return (
              &lt;div className="section"&gt;
                  &lt;form onSubmit={handleSubmit(this.onSubmit.bind(this))}&gt;
                      &lt;Field
                          label="Name"
                          name="name"
                          placeholder="Fluffy"
                          component={renderTextField}
                          type="text"
                      /&gt;
  
                      &lt;button
                          className="btn-large dark-primary-color"
                          type="submit"
                      &gt;
                          Add Monkey
                          &lt;i className="material-icons right"&gt;done&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const validate = values =&gt; {
      const errors = {};
  
      if (!values.name) {
          errors.name = 'Please enter monkey name';
      }
  
      return errors;
  };
  
  export default reduxForm({
      form: 'addmonkey',
      validate
  })(AddMonkeyForm);
  
  //})(connect(null, { createMonkey })(AddMonkeyForm));
  </code></pre>
  
  <p><strong>The action in actions.js that I will eventually call with this</strong></p>
  
  <pre><code>export function createMonkey(userid, name) {
      return function(dispatch) {
          const url = `${USER_API_URL}/${userid}/monkey/new`;
          const request = axios.post(url, {
              headers: { authorization: `Bearer ${localStorage.getItem('token')}` },
              name
          });
          request
              .then(response =&gt; {
                  console.log("createMonkey has RESPONSE", response.data.createdMonkey)
                  dispatch({
                      type: GET_USER_MONKEYS,
                      payload: response.data.createdMonkey
                  });
              })
              // If request is bad...
              // -Show an error to the user
              .catch(() =&gt; {
                  console.log('error');
              });
      };
  }
  </code></pre>
  
  <p>**usergetters.js reducer that will eventually update the userdata.monkeys state based on the form.</p>
  
  <pre><code>import { GET_USER_CUPCAKES, GET_USER_MONKEYS } from '../actions/types'
  
  const initialUserData = [{cupcakes: [], monkeys: []}]
  
  export default function userGetterReducer(state = initialUserData, action) {
    switch (action.type) {
      case GET_USER_CUPCAKES:
        return {...state, cupcakes: action.payload}
      case GET_USER_MONKEYS:
        return {...state, monkeys: action.payload }
      default:
        return state
    }
  }
  </code></pre>
  
  <p>The project is on github. This particular error branch is <code>addmonkeyform1</code> if for some reason you end up on the master, it will look different than shown here. <a href="https://github.com/monkeywithacupcake/mern-cupcake/tree/addmonkeyform1" rel="nofollow noreferrer">Go to Project on Github</a></p>