Why does my redux container render when unrelated state changes?

Question

My redux state looks like this:

{ 
  entities: {
    cars: {
      byId: {},
      isFetching: true
    },
    persons: {
      byId: {},
      isFetching: false
    }  
  }
}

My Person container:

class PersonPageComponent extends React.PureComponent<
  IPersonPageProps & InjectedAuthRouterProps,
  {}
> {
  render() {
    console.log('render´);
    return (<p>helllo</p>);
  }
}

const mapStateToProps = (state: RootState, ownProps: { title: string }) => ({
  list: _.values(state.entities.persons.byId), // personsSelector(state)  
});

export const PersonPage = userIsAuthenticated(
  connect<IPersonPageProps, {}, {}>(
    mapStateToProps
  )(PersonPageComponent)
);

Why does my Person container re-render when I have changes in redux state under entities.cars? Is it supposed to trigger render since 'entities' changed? A GET_CARS action sets entities.cars.isFetching = true. Should this result in a re-render in PersonComponent?

Answer 1

state.entities.persons may be the same object after updating cars , but _.values(state.entities.persons.byId) produces a new object with each execution – _.values does not cache/reuse its result, even if the input stays the same.

Since the prop provided to the PureComponent is now a different object (even with identical content), a re-render is triggered.