What does react docs mean by "... pass this.props.onChange directly to Chosen ..." in the article "Integrating with jQuery Chosen Plugin"?

Question

I am going through the react documentation article of integrating-with-jquery-chosen-plugin, and there they mention:

We won’t pass this.props.onChange directly to Chosen because component’s props might change over time, and that includes event handlers. Instead, we will declare a handleChange() method that calls this.props.onChange, and subscribe it to the jQuery change event

This doesn't make sense to me, because they are already using(passing as prop?) onChange on Chosen in <Chosen onChange={value => console.log(value)}>. Here's the code the docs use just after:

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
  );
}

It appears to me that the docs wanted to say:

We won’t pass this.props.onChange directly to Chosen select because [Chosen]component’s props might change over time, and that includes event handlers(onChange?).

But still I don't grasp the meaning of props including event listeners might change. The only prop that might change here is the children prop, which would affect select's {this.props.children}. Why would the onChange event listener change?

Can someone please elaborate upon what the docs are trying to say.

Answer 1

This is what docs suggests:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);
  this.$el.on('change', this.handleChange);
}

handleChange(e) {
  this.props.onChange(e.target.value);
}

by mentioning

We won’t pass this.props.onChange directly to Chosen because component’s props might change over time, and that includes event handlers. Instead, we will declare a handleChange() method that calls this.props.onChange, and subscribe it to the jQuery change event

They want to avoid doing this :

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.$el.on('change', this.props.onChange);
}

in this example, when the component is mounted, the event listener is set and this version of this.props.onChange given as event handler is stuck, it will not be updated, but

component’s props might change over time

there is a good example in the comments section.

so what we want is to always get the newest updated props, here's the benefit of creating our own function so we can bind it to this:

this.handleChange = this.handleChange.bind(this);
this.$el.on('change', this.handleChange);

By using this.handleChange.bind(this) and referencing this.handleChange as the event handler, you ensure that the event handler alwayz calls this.handleChange associated with the props at the time of binding.