Add shallowCompare module and use it in PureRenderMixin + tests #3355

Merged
merged 1 commit into from Mar 13, 2015

Projects

None yet

6 participants

@cpojer
Member
cpojer commented Mar 10, 2015

This adds shallowCompare and adds tests for PureRenderMixin.

This allows the following pattern:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (!React.addons.shallowCompare(this, nextProps, nextState)) {
      return myCustomCheck(…);
    }
    return false;
 }
}

Not super happy about this API. Component.prototype.shouldComponentUpdate = React.addons.shallowCompare seems like the better choice for the common case, but then using it would require calling React.addons.shallowCompare.apply(this, arguments).

@sebmarkbage sebmarkbage merged commit ca8d7cb into facebook:master Mar 13, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@cpojer cpojer deleted the cpojer:shallowCompare branch Mar 17, 2015
@cpojer cpojer referenced this pull request Mar 25, 2015
Merged

Add npm-react-codemod #3506

@3den
3den commented Nov 13, 2015

@cpojer @sebmarkbage why dont we just create an class that inherits from Component?

e.g:

class PureCompoment extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         return !React.addons.shallowCompare(this, nextProps, nextState)
      }
}

class MyComponent extends PureCompoment {  
    // it gets shouldComponentUpdate for free
}
@dapetcu21

@3den Because Javascript doesn't support multiple inheritance and using multiple "mixins" like this would be impossible.

@3den
3den commented Nov 14, 2015

@dapetcu21 I think we don't need multiple inheritance nor mixins. I am suggesting that react should offer 2 kinds of components: React.Component and React.PureCompoment. So on all components that you want it to be "pure" you can extend PureCompoment instead of Component.

@jimfb
Contributor
jimfb commented Nov 14, 2015

@3den What happens when you want to be both a PureComponent and a GraphqlComponent? You can't extend both.

@3den
3den commented Nov 14, 2015

@jimfb true, I see your point. But I think it would be nice to have a something like a decorator just so that we don't have to copy and paste that function over and over...

@jimfb
Contributor
jimfb commented Nov 14, 2015

@3den Yes, that's called a "mixin".

@pierlo-upitup pierlo-upitup referenced this pull request in mesosphere/marathon Nov 24, 2015
Open

Migrate to React 0.14 #2710

@gaearon
Member
gaearon commented Jan 4, 2016

Also, sometimes copy-pasting a trivial three-line function can be a better solution than introducing abstraction and indirection. It makes it obvious where the method comes from, and easy to change its implementation if necessary later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment