Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Mar 13, 2015

Conversation

@cpojer
Copy link
Contributor

@cpojer 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 added a commit that referenced this pull request Mar 13, 2015
Add shallowCompare module and use it in PureRenderMixin + tests
@sebmarkbage sebmarkbage merged commit ca8d7cb into facebook:master Mar 13, 2015
1 check passed
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 mentioned this pull request Mar 25, 2015
@3den
Copy link

@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
Copy link

@dapetcu21 dapetcu21 commented Nov 13, 2015

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

@3den
Copy link

@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
Copy link
Contributor

@jimfb 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
Copy link

@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
Copy link
Contributor

@jimfb jimfb commented Nov 14, 2015

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

@gaearon
Copy link
Member

@gaearon 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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants
You can’t perform that action at this time.