A
A
Andrey2019-05-17 18:18:09
React
Andrey, 2019-05-17 18:18:09

Why doesn't the Shallow comparison work in the connect function?

I connect the component to the store like this:

const mapStateToProps = (store, ownProps) => ({
    userIsFollowable: store.users[ownProps.userId].isFollowable,
    groupIsFollowable: store.groups[ownProps.groupId].isFollowable
});

export default connect(mapStateToProps)(FollowLinks);

The redux-connect documentation says that if the properties do not change, then there will be no rerender, there is a check in the connect function that performs a shallow comparison of objects. And accordingly, there is no point in using React PureComponent together with connect. However, this does not work for me in a project with React Native. Here:
5cdece5930f2e135826099.png
Here you can see that in the component that displays the entity with id 43223470435, the userIsFollowable (false) and groupIsFollowable (true) fields do not change, the userId and groupId do not change either. However, with each request to the server, when the store is replenished with newly loaded data (other entities), the component is re-rendered.
Tried caching in reselect - doesn't work.
However, if you remake the component from a function to a React PureComponent, then everything works correctly, redrawing does not occur when elements are added to the store.
What can be wrong? Any ideas?
P.S. Please pay attention to the fact that PureComponent prevents rerendering, that is, the option that I subscribed the component to "extra" fields that change imperceptibly for me is excluded.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question