redux-pure-connect

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.

API

ensureShallowPurity

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, {}, {}

ensureShallowPurityConnect

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
);

connect

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);

Production

We are removing these logs in production by checking the node env. It will just pass through the arguments.