Infinite loop (Maximum call stack size exceeded) when passing redux form as a prop

EDIT:

Apparently it only happens when the component where the form is being rendered is connected to the redux store and one of the properties is being enhanced on the mapStateToProps function, for example:

const mapStateToProps = state => ({
  // This causes the error
  clicks: { enhanced: true, count: state.clicks.count },
  // This works
  // clicks: state.clicks
});

---

Passing a redux form component as a prop to another component is causing an infinite loop. This only happens if you pass it using an anonymous function (functional component).

Here is an example:

const NewMessageForm = reduxForm({
  form: 'newMessageForm'
})(({ handleSubmit }) => (
  <Form onSubmit={handleSubmit}>
    <Field
      name="text"
      component="input"
      placeholder="Add your message here"
    />
  </Form>
));

function Wrapper({ newMessageForm: NewMessageForm }) {
  return (
    <div className="wrapper">
      <NewMessageForm />
     </div>
  );
}

function handleSubmit(values) {
  console.log('submit', values);
}

function Counter () {
  return (
    <div>
      <h1>Hello World!</h1>
      // Here is where the problem happens
      <Wrapper newMessageForm={() => <NewMessageForm onSubmit={handleSubmit} /> }/>     
    </div>
  );
}

This error doesn’t happen if the component is passed like this:

<Wrapper newMessageForm={NewMessageForm}/> 

or even like this:

constructor(props) {
  super(props)
  this.NewMessageForm = () =>  <NewMessageForm onSubmit={handleSubmit} />
}
render() {
   .....
   <Wrapper newMessageForm={this.NewMessageForm}/> 
   .....
}

I have an example here

What’s your environment?

Tested on chrome using redux-form@6.5.0

Other informations

Stack Trace:

Uncaught RangeError: Maximum call stack size exceeded
    at traverseAllChildrenImpl (traverseAllChildren.js:65)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)
    at flattenChildren (flattenChildren.js:66)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:299)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:936)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:754)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:716)

I’ve tried to reproduce this bug in an unit test but, as for today, I wasn’t able to.

[rostislav-simonik]

I’ve found issue. validate on Field element must point to the same reference otherwise given Field is reregistered. Following code caused given issue with construction that I’ve mention in comment above .

<Field
  validate = { [
     (value) => {},
  ] }
</Field>

[leeroybrun]

I had the same issue. My form was re-rendering infinitely when the user added an object to a FieldArray.

The nextProps/this.props and nextState/this.state were all the sames in shouldComponentUpdate, but it was still re-rendering.

I was able to fix this by overriding shouldComponentUpdate and check if nextProps/this.props and nextState/this.state were not strictly equal.

class FormParent extends React.PureComponent {
  shouldComponentUpdate(nextProps, nextState) {
    return JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
  }

  render() {
    return (
      <TheForm onSubmit={data => onSaveAction(data)} />
    )
  }
}