javascript - How to limit react-redux connect update re-renders to specific state branches?

Question

I have an action and reducer that updates a global counter. This action is fired on a rapid interval. The reducer returns a new copy of the state for each action. The reducer looks like:

import { handleActions } from 'redux-actions';
import { sceneTick } from './actions';

export default (state, action) => handleActions({
  [sceneTick]: (state, action) => {
    return {
      ...state,
      loop: action.payload,
    }
  },

I am using react-redux's connect method on various React components. Not all the components care about this loop counter. Because I am returning a new state in the reducer on each tick, all components subscribed with connect get their mapDispatchToProps executed which causes unnecessary React render calls.

One of these componets looks like:

const mapStateToProps = (state, props) => {
  return {
    viewport: state.viewport,
    assets: state.assets,
  };
};


export default connect(mapStateToProps, {})(Component)

Even though this component has no dependency on state.loop it gets triggered to re-render. This causes re-rendering, over rendering, multiple rendering, unnecessary rendering, performance issues and unexpected behavior in components that need not re-render.

Update I should also maybe add that I am not using combineReducers here and all reducers are applied to the full state. Not sure if relevant.

Answer 1

Redux connect accepts a areStatesEqual function option that can be used to narrow down equality checks to specific state branches.

export default connect(
  {},
  {},
  null,
  {
    areStatesEqual: (next, prev) => {
      return (
        prev.branch === next.branch
      );
    }
  }
)(Component);