Re-rendering the connect () ed component based on mapStateToProps output

Question

In a React + Redux project, I have a connect() ed component that checks user rights through an API fetch. Obtained permissions are stored in the Redux repository.

The component basically looks like <Can check="...">...</Can> , which speaks to our API (through Redux actions) to enable validation. If permission is granted, this.props.children displayed, null otherwise.

To do this, mapStateToProps() computes a passes prop from the authorization data in the repository, which is checked in the <Can /> render() method. I use the ownProps parameter for mapStateToProps() to get the “check material” and compute the passes flag.

There is a bit of caching going on, so I do not re-read on each mount component, and it basically works. However, sometimes the component will not re-render when the passes prop update is updated to true (it will be displayed after navigation - using the react router) and vice versa, so basically if the component is installed again).

Do the connect() ed components re-render if the result from mapStateToProps() changes? The docs for react-redux connect() talk about this:

If ownProps is specified as the second argument, its value will be the attribute passed to your component, and mapStateToProps will be re-called whenever the component receives new details.

Does this mean that passing to ownProps changes the rendering only for re-rendering, if the props change or in some other way? How can I understand the note regarding memoization / function return from mapStateToProps() , or is it not even related?

thanks

Answer 1

Toggle () edited ed components if the result from mapStateToProps () changes? The docs for reaction-redux connect () say this:

Exiting the function can not changes on its own. Something should make this function reevaluated first.

If the state of Redux changes, mapStateToProps reevaluated.

If the details received from the parent component are uneven (changed) and you use the ownProps argument, ownProps is also overridden.

If mapStateToProps returned shallow equal values ​​to its last call, then React Redux will skip rendering. If it returns finely uneven values, the wrapped component will be re-rendered. mapStateToProps to be a pure function in itself.

Sometimes, however, a component will not re-render when pass prop is updated to true

Create a minimal project that reproduces this and report a problem with the appropriate code example.

How can I understand the note regarding memoization / function return from mapStateToProps (), or is it not even related?

Not applicable.

Answer 2

A few things to learn here:

• connect will not accurately compare the result of the last call to mapState with the current call to mapState . If nothing has changed, it will not re-display the wrapped component.
• By default, connect will only start mapState if the store notifies subscribers. However, if your mapState function mapState declared to accept two parameters, connect will pass in the wrapped props component as a second argument, allowing you to do things like state.somePerItemData[ownProps.itemId] . Then it also calls mapState at any time when the incoming details are different, as this may affect the output of mapState .
• By default re-fetching, you can save only one cached value for each selection function. If you have a component that is created multiple times and all instances use the same instance of the select function, then mapping the selection probably won't work the way you want, since each instance of the component probably calls it with different inputs (for example, their own details). Thus, as a highly advanced optimization, you can actually pass the factory function as an argument to mapState , which can create a unique instance of the select function for each instance of the component.

All that said, I'm afraid I have no specific answer to your real question about the updated component. I will probably need to see the code in more detail.