Update just one input on this input onChange

[mb8z]

As tried on https://ant.design/components/form/ page with Highlight updates checked in the React extension for chrome, I've noticed that whenever I change one input, all other inputs are updated as well.

While this is not an issue in simple forms, it gets quite slow in more complex ones.

I will be looking into the rc-form code to see if I can propose some solution for this issue. Please tell so if you do not want to improve this part of the package, or if you already know why this thing happens.

[vincro]

@Ancinek Did you ever get to the bottom of any performance updates?

In my current investigations, I have found that the core issues seems to be the form prop passed in by Form.create, that triggers changes across the board when updates are made, though this could be the way I currently have the form setup to share the helpers.

Other attempts to optimize, such as amending options in getFieldDecorator also seem to make no difference at all.

Ensure you are using stateless components, and recompose pure/onlyUpdateForKeys calls also help, but this does not limit the constant updates from props.form.

[mb8z]

@vincro Unfortunately not. I’ve tried to create a parent class that could manage multiple forms but I found it not possible with current implementation rc-form.

[vincro]

@Ancinek Am I reading this right? You were able to sidestep the performance issues by not having a parent class? Thanks!

[mb8z]

No :( I do not remember where my problem was, but something was missing and I did not have time to create a form of the repo and make it possible.

I’ll be needing this in a big form in a few days so I guess there will be another try from my side. I will post updates if it goes right for sure!

[john-hu]

@Ancinek I got the same issue recently. The key is that antd's Form asks rc-form to put two magic props, data-__meta and data-__field, into your component, see here and here. You should blacklist them at your shouldComponentUpdate to get rid of it. This happens if you have a really big form and you have some computations at render function. I did have one.

Here is an example, if you use lodash:

  shouldComponentUpdate(nextProps) {
    // We don't need to implement this at the normal case. The antd's Form will
    // supply meta and field properties to this component which make it
    // re-render on every update of unrelated components.
    return !_.every(
      this.props,
      (value, key) =>
        _.includes(BLACK_LIST_PROPS, key) ? true : value === nextProps[key],
    );
  }