React onChange handler is being called multiple times during page load

Question

We're trying to add a onChange handler to one of our custom components - namely, a Checkbox component (the only reason for it being a custom component is so that we can efficiently encapsulate the intermediate HTML attribute). It looks something like this:

<Checkbox
  id="select-all"
  onChange={this.handleSelectAllChange(ids)}
  indeterminate={isIndeterminate}
  checked={areVisibleItemsSelected}
  disabled={isDisabled}
/>

The handler function is structured somewhat like this:

handleSelectAllChange(ids) {
  // omitted code that filters on ids and produces newIds

  this.props.updateIds(newIds);
}

Where this.props.updateIds is a passed-down function that modifies the parent component's state.

The problem is that this function is called about 10 times during page load, which is not intended. I thought it was only called when the actual checkbox element is modified?

Answer 1

By declaring it like this onChange={this.handleSelectAllChange(ids)} the method call happens immediately at rendering the CheckBox. With ES6 you can avoid this by using

onChange={() => this.handleSelectAllChange(ids)}

This means you pass a new function which will call handleSelectAllChange on change.

Answer 2

I just had the same issue... I was able to fix the problem stopping the propagation of the event. Add this in the function being called by your onChange event:

e.stopPropagation();