Comments (6)
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.
@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.
- 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.
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.
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.
Sounds good.
from react-redux.
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)
- Unable to resolve module react-dom HOT 10
- Jest: Module import syntax error HOT 9
- Unable to resolve peer dependency react-native on [email protected] HOT 1
- TypeError: dispatcher.useSyncExternalStore is not a function HOT 1
- where development or production mode should be specified? HOT 7
- After some time useSelector stops doing re-renders HOT 8
- Provider properties for dev checks to be passed explicitly to new devModeChecks property HOT 7
- Getting Syntax error for react-redux when building project HOT 4
- Connect not working with detox envinronment HOT 1
- Getting issue in middleware of configureStore when update redux-toolkit to 2.0.1 HOT 1
- useDispatch() causing unexpected navigate back to previous screen HOT 3
- Single global store and two Provider occurs an error for microfrontend app HOT 1
- Test fail with provider in react-native HOT 3
- useSelector hook seems to break hook parsing in React Developer Tools HOT 2
- TypeScript: not possible to use a component's `store` and `context` props when wrapped with `connect` HOC HOT 2
- docs: v9.0.0 release missing information HOT 1
- Connected children components might have mapStateToProps not called HOT 18
- Website search is broken HOT 2
- Hooks API Reference uses misnamed type in the useSelector() example HOT 1
- Include UMD build artifacts for latest release HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-redux.