props maybe not immutable

[georgebbbb]

examples

<My value={Immutable.fromJS({value:123}) }  onChange={this.handleChange.bind(this)}></My>

this component's props.onChange isn't immutable so

  if (!bHasOwnProperty(keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }

may be miss compare mutable data like onChang

[jurassix]

@georgebbbb technically onChange is a property of your Component and should really be something similar to this:

const props = {
  value: 123,
  onChange: this.handleChange.bind(this),
}
<My {...Immutable.fromJS(props)} />

Update: this solution should not work since we are creating a new reference to this.handleChange every render

[georgebbbb]

Thank you but It seems that {...Immutable.fromJS(props)} does not work https://github.com/facebook/react/issues/2059 GitHub

[jurassix]

Yeah I can see that my example above doesn't make sense. I'll take a look this weekend and add a test case to cover this issue. Feel free to do the same. I think there is an obvious solution, I just need a test to flush it out.

[georgebbbb]

ok,thank you very much

[jurassix]

@georgebbbb I still haven't added any tests for this issue. But, there may be a quick fix for you.

Instead of calling bind() every render, try calling bind once, in the constructor of your Component. This should keep the onChange() handler referentially equal in child components.

class App extends React.Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }
  render() {
    return (
      <My value={Immutable.fromJS({value:123}) }  onChange={this.handleChange}></My>
    );
  }
  handleChange() {
    //...
  }
}

Let me know if this fixes the issue.

[jurassix]

@georgebbbb were you able to confirm the above solved the issue?