Performance with lots of inputs about simple-react-form HOT 6 CLOSED

For those kind of forms with lots of inputs, I usually edit the fields' onChange with lodash' _.debounce so they get called only once.

from simple-react-form.

@fermuch gotcha thanks!!

from simple-react-form.

@fermuch do i just put an onChange as a prop to Field?

from simple-react-form.

I use custom fields, so I edit those fields. For example, if you are using simple-react-form-material-ui's Text field, edit this line: https://github.com/nicolaslopezj/simple-react-form-material-ui/blob/master/src/text.jsx#L38-L40 so this.props.onChange is only called once.

On the constructor, you can add:

constructor (props) {
  super(props)
  this.state = { value: props.value }

  // this line was added
  this.onChangeDebounced = _.debounce(props.onChange, 250); // debounce to 250ms
}

And on the onChange function:

onChange (event) {
  this.setState({ value: event.target.value })
  if (this.props.changeOnKeyDown) {
    // this line changed
    this.onChangeDebounced(event.target.value)
  }
}

from simple-react-form.

Thanks @fermuch

from simple-react-form.

Performance should be improved in v2

from simple-react-form.