3 ms·

From my understanding, it makes shouldComponentUpdate() very simple: return nextProps.value !== this.props.value; If the object is different, it has changed.

Touche 12y ago
I'm not familiar with React, but why would that not be the case without this lib? {} !=== {} EDIT: Maybe I understand. You're saying a parent component might do something like: foo.bar = 'blah'; and then doing a simple equality check foo === foo is not enough, you have to check that the properties have not changed either. Is that correct?
- EdwardMSmith 12y ago
  Exactly. If you have deeply nested data, multiple properties that may change, or arrays, then it becomes quite difficult (and/or slow) to test if there's a difference.
jannes 12y ago
Yes, that's how for I've got, too. But then you have a problem if your React component has multiple attributes. Suddenly your check beckomes much larger: return (nextProps.attr1 !== this.props.attr1 || nextProps.attr2 !== this.props.attr2 || nextProps.attr3 !== this.props.attr3 || nextProps.attr4 !== this.props.attr4); Which would result in a lot of boilerplate code if you had to do this for every single attribute in every component in your application. It would be much simpler to just do this check: return nextProps !== this.props; But that's impossible if you're using JSX, because the JSX compiler automatically inserts a normal JavaScript object into your code, instead of an immutable object from this library. So from my point of view this immutable-js library and JSX seem incompatible, which is kind of weird since Facebook apparently uses JSX internally for their React code.
- augustl 12y ago
  MyComponent({realProps: immutable props}) comes to mind.. In a flux application you typically always ask flux for the state, though, so it becomes this.getFlux().myThing.
- vjeux 12y ago
  PureRenderMixin[1] is doing this without having you to enumerate all the props [1] http://facebook.github.io/react/docs/pure-render-mixin.html http://facebook.github.io/react/docs/pure-render-mixin.html

Touche 12y ago

I'm not familiar with React, but why would that not be the case without this lib? {} !=== {} EDIT: Maybe I understand. You're saying a parent component might do something like: foo.bar = 'blah'; and then doing a simple equality check foo === foo is not enough, you have to check that the properties have not changed either. Is that correct?

EdwardMSmith 12y ago
Exactly. If you have deeply nested data, multiple properties that may change, or arrays, then it becomes quite difficult (and/or slow) to test if there's a difference.

jannes 12y ago

Yes, that's how for I've got, too. But then you have a problem if your React component has multiple attributes. Suddenly your check beckomes much larger: return (nextProps.attr1 !== this.props.attr1 || nextProps.attr2 !== this.props.attr2 || nextProps.attr3 !== this.props.attr3 || nextProps.attr4 !== this.props.attr4); Which would result in a lot of boilerplate code if you had to do this for every single attribute in every component in your application. It would be much simpler to just do this check: return nextProps !== this.props; But that's impossible if you're using JSX, because the JSX compiler automatically inserts a normal JavaScript object into your code, instead of an immutable object from this library. So from my point of view this immutable-js library and JSX seem incompatible, which is kind of weird since Facebook apparently uses JSX internally for their React code.

augustl 12y ago
MyComponent({realProps: immutable props}) comes to mind.. In a flux application you typically always ask flux for the state, though, so it becomes this.getFlux().myThing.
vjeux 12y ago
PureRenderMixin[1] is doing this without having you to enumerate all the props [1] http://facebook.github.io/react/docs/pure-render-mixin.html http://facebook.github.io/react/docs/pure-render-mixin.html