GithubHelp home page GithubHelp logo

Comments (6)

gaearon avatar gaearon commented on April 27, 2024

Fair. I'm open to opt-out behavior with a { pure: false } options parameter. Because all parameters are functions, we can let it always come last (e.g. you can skip mergeProps or mapDispatchToProps). A PR is welcome.

from react-redux.

gnoff avatar gnoff commented on April 27, 2024

@dallonf yup this is a tricky situation. My thought is that in keeping with the paradigm that redux assumes state is not mutated we should guide people towards making more pure Components and leave the aggressive shouldComponentUpdate as is.

Given that you won't always have control over this situation though i think there are a couple of workarounds that might be worth exploring (some more hack-ish than others). I haven't tried any of these but in theory they should work

1) make your mapStateToProps, mapDispatchToProps, or mergeProps arguments return a purposely 'dirty' props object. something like

(state, ownProps) => ({
  //whatever you had before +
  forceUpdate: {}
})

This will eliminate all preformance optimizations from shouldComponentUpdate since there will always be a prop that has a new object reference and therefore should fail the shallowEqual test
this doesn't work per @dallonf 's testing.

  1. develop your own 'impure' Component decorator that wraps your connected component and have it call forceUpdate on the connected component child whenever it's props change.

maybe something like this

export default function wrapWithImpure(WrappedComponent) {
  class Impure extends Component {
    componentWillUpdate() {  
      this.refs.wrappedInstance.forceUpdate();
    }
    render() {
      return <WrappedComponent ref="wrappedInstance" {...this.props} />
    }
  }
  return Impure;
}

btw, i never actually use forceUpdate so not sure if it would need to go there or in componeDidUpdate or somewhere else but essentially this should force the connected component to update on every prop change

you would use it like this

import impure from //wherever...
import connect //....

impure(connect(mapState, mapDispatch)(Component));

from react-redux.

gnoff avatar gnoff commented on April 27, 2024

Because all parameters are functions, we can let it always come last (e.g. you can skip mergeProps or mapDispatchToProps)

dealing with a second arg of an object of functions complicates this slightly but yeah this solution is certainly workable.

from react-redux.

dallonf avatar dallonf commented on April 27, 2024

Cool, I'll see if I can add an options argument (defaulting to pure: true) over the weekend. I'm actually rather fond of the forceUpdate: {} workaround (and slightly embarrassed I didn't think of it myself 😉), but probably better to have something a bit more readable in the long run. And it opens the door for more configuration options on @connect, should you ever need them...

from react-redux.

gnoff avatar gnoff commented on April 27, 2024

Sounds good.

from react-redux.

dallonf avatar dallonf commented on April 27, 2024

FYI to anyone looking at this issue, the forceUpdate: {} hack actually doesn't have the intended effect; the shouldComponentUpdate definition compares the props that were already calculated the last time there was a store update or new props were received, so it won't be able to handle updates outside the Redux flow.

Also, after diving into the implementation of a pure: false option, I think that the options argument is going to always need to be the fourth argument to @connect; trying to make it the last argument regardless of which others are present would probably lead to madness.

Anyways, I've got a PR incoming soon.

from react-redux.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.