tldr; Check and log whether react-redux's connect method is passed methods that create impure props.
Unintended re-rendering with React and Redux is usually caused by developers
creating a mapStateToProps
that fails shallow equality check. You can read
more about it
here.
redux-pure-connect is built on top of @lelandrichardson's
gist
for ensuring purity on mapStateToProps
and other methods passed to connect.
Simply wrap your mapStateToProps
with this helper and it will log when your
props are impure, and what props.
const mapStateToProps = state => ({ users: state.users });
ensureShallowPurity(mapStateToProps);
// or
const mapStateToProps = ensureShallowPurity(state => ({ users: state.users }));
And if impure, will log something that looks like this:
{key}, {first result}, {second result}
object, {}, {}
This is used to wrap all your arguments to connect
import { connect } from 'react-redux';
const mapStateToProps = state => ({ users: state.users });
export default connect(...ensureShallowPurityConnect(mapStateToProps))(
MyComponent
);
If you simply don't want to import two libraries everytime:
import { connect } from 'redux-pure-connect';
const mapStateToProps = (state) => ({ users: state.users })
export default connect((mapStateToProps)(MyComponent);
We are removing these logs in production by checking the node env. It will just pass through the arguments.