All inputs re-rendering even without validation.

Heya, I’ve got 25ish textfields in a Form in v1.10.9. Every time I enter anything in one of them, they all re-render, taking about 250-300ms per keystroke.

I’ve checked the gotchas section about validation, and I’ve culled mine down so there’s no validation, no external onChange/onBlur being passed in, no functions being created inline on any components etc. If I console.log in the render() of <InformedTextField/> I see a render for all 25 instances, every keystroke or blur.

My main class only has this in the render() function:

<Form>
  {({ formApi }) => (
  <React.Fragment>
	<InformedTextField
                    field="name"
                    label="Name"
                    initialValue=""
        />

... X 25 or so

 	<Button label="Add User" onClick={formApi.submitForm} disabled={this.busy} />
   </React.Fragment>
  )}
</Form>

<InformedTextField/> is a custom class which wraps the Material-UI TextField. It doesn’t do any validation or setting of state and simply exports export default asField(InformedTextField); after setting the appropriate value and onChange/onBlur functions.

The change/blur functions of <InformedTextField/> are set on the TextField itself like:

onChange={this.handleChange}
onBlur={this.handleBlur}

and the functions are:

 handleChange = event => {
    this.props.fieldApi.setValue(event.target.value);
    //if (this.props.onChange) {
    //  this.props.onChange(event);
    // }
  };

  handleBlur = event => {
    this.props.fieldApi.setTouched(true);
    //if (this.props.onBlur) {
    //  this.props.onBlur(event);
    //}
  };

It’s really not usable currently with all these form items, so I’m assuming I must be missing something. Any suggestions on what I could look at to prevent everything from re-rendering?

[timothyallan]

Thanks all, looks like manual shouldComponentUpdate check is the only way to do it!

[joepuzzo]

Eventually when i have more time im going use hooks instead of HOCs and hopefully these issues will be easier to debug/or non existent