Form component does not update when form data changes

[gabrielecirulli]

First of all thanks for all the good work on this library. I started using it for the first time today, and I'm using version 6, and it seems quite straightforward so far.

I'm building a form where certain values will influence what parts of the form get displayed (some checkboxes will show/hide certain sections). The way I found to solve this is to connect my form to the store and use the value of the fields to show/hide things in the form.

In the code sample you see below (which admittedly involves no checkboxes but seems to have the same issue), you will see the word "rerender" shown in the console only once, after you type in your first character in the text field, and never again afterwards.

Being new to this library, I know that I might be doing something wrong. If that's the case, would you be able to point me to the correct way of solving this?

If this indeed happens to be a bug, please let me know as I could also try to help troubleshoot the potential issue in redux-form.

import React, { Component } from "react";
import { connect } from "react-redux";
import { reduxForm, Field } from "redux-form/immutable";

@connect(state => {
  return { title: state.form.getIn(["event", "values", "title"]) };
})
@reduxForm({
  form: "event",
})
export default class EventForm extends Component {
  render() {
    console.log("rerender");
    return (
      <div>
        <Field
          name="title"
          component={React.DOM.input}
          type="text"
          autoFocus
        />
      </div>
    );
  }
}

[gabrielecirulli]

I haven't found a solution yet, but this seems related to https://github.com/erikras/redux-form/blob/v6/src/reduxForm.js#L87 and more specifically the whitelist of props which are considered when updating: https://github.com/erikras/redux-form/blob/v6/src/reduxForm.js#L17-L27

[gabrielecirulli]

I just instrumented the build of 6.0.0-alpha.6 (immutable flavour) that was found in my project's node_modules, and as it turns out, it seems that the two locations that I pointed out in the previous comment are indeed the culprit.

Here's my explanation of what goes wrong:

• The first time a field changes in the form, the whole form is re-rendered because the pristine prop goes from true to false
• All subsequent prop changes still go through the shouldComponentUpdate method, but get denied as none of the propsToUpdateFor has changed (since this is everything that the method currently looks at).

I'm honestly not sure what the solution should be, because I don't think I understand the rationale for a whitelist of props such as propsToUpdateFor in the first place: it should prevent accidentally re-rendering the form every time a field changes, but isn't that already taken care of by the new API of v6 where fields are independent of the form, and as a result, shouldn't the form not re-render every time anyway?

I would love to contribute a PR that fixes this issue, however when I try to clone, npm-link and use the cloned version of the repository (even after running npm run prepublish), I get a weird error that I don't get in the npm published version of the library:

Uncaught Error: Invariant Violation: ReduxForm.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

[gabrielecirulli]

It appears that the last error I cited is because I'm using React 0.13 while redux-form v6 uses React 15. I'll see if there's a way to work around that.

[erikras]

Thanks for documenting your progress here. It might be very helpful to others. And you might rubber duck your way into a solution.

v6 just switched from a propsToUpdateFor whitelist to a propsNotToUpdateFor blacklist. New version with this fix should be released soon (today or tomorrow).

[gabrielecirulli]

Hey Erik, I'm really happy to hear that, I have a feeling that'll fix my exact issue! You're doing some incredible work here, keep it up!

On 04 May 2016, at 20:15, Erik Rasmussen notifications@github.com wrote:

Thanks for documenting your progress here. It might be very helpful to others. And you might rubber duck your way into a solution.

v6 just switched from a propsToUpdateFor whitelist to a propsNotToUpdateFor blacklist. New version with this fix should be released soon (today or tomorrow).

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub

[erikras]

Fix published as v6.0.0-alpha-7.

[ooflorent]

I'm closing this since Erik landed a fix in the latest release.
Feel free to reopen the issue if the issue is still there!

[jsj14]

for the older versions like, 5.3.3, even on using the formActions.change(), the value doesn't seem to change when I check it using console.log. However the redux state is updated in the hot-loader. Any reason why the conflict?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.