mapStateToProps should not be called with functional component rendering a connected class component

[pandaiolo]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.2.0
• ReactDOM: 18.2.0
• Redux: 4.2.1
• React Redux: 8.0.5

What is the current behavior?

Description:

• Depending on a parent component being a functionnal or class component, children connected component do not see their mapStateToProps function called in the same way

Reproduction:

• https://codesandbox.io/s/beautiful-gianmarco-wo67u0
• Click on toggle and check the console logging
• we can see a call to mapStateToProps in the class component child, when the parent component is a functional component ([APP1]) but not when the parent is a class component ([APP2])

Here is the logging, by app, when toggling off connected children (conditional rendering):

With a functional component as parent:

[APP1] CLASS CHILD MAP STATE TO PROPS
[APP1] NORMAL CHILD SELECTOR
x2 [APP1] NORMAL PARENT SELECTOR
[APP1] RENDER PARENT {showChild: false}
[APP1] NORMAL PARENT SELECTOR
[APP1] RENDER PARENT {showChild: false}

With a class component as parent:

[APP2] CLASS PARENT MAP STATE TO PROPS
x2 [APP2] RENDER PARENT {showChild: false}
[APP2] NORMAL CHILD SELECTOR

Note:

• FYI this led to an issue in our code when refactoring a component, with uncaught error in the mapStateToProps function of a child of that component, because suddenly it was being called with unexpected state and trying to get state on undefined keys.

Maybe all of this is a normal consequence of the inherent difference in React rendering functional or class component, but I still wanted to document this in an issue for the record, and see if you have any comment.

Thanks!

What is the expected behavior?

• mapStateToProps should be called consistently (or should it not?)

Which browser and OS are affected by this issue?

Chrome OSX

Did this work in previous versions of React Redux?

• Yes

[markerikson]

I'm not sure what you're trying to describe here, tbh.

At my first guess (just reading the description), I assume that the difference in mapState calls is not a bug, but simply a question of which components are re-rendering and which are not, per https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#standard-render-behavior .

[pandaiolo]

I have tried to explain as accurately as possible and provided a codesandbox, but if it is unclear or need more details, I'll be happy to provide them.

What I'm pointing is that the two examples in that demo are rendering exactly the same thing (supposedly) but mapState is called on one side and not on the other, which was unexpected and led to a bug (on our side), so I'm reporting on that.

[markerikson]

@pandaiolo yeah, afraid I don't have time to look at this right now (busy with day job stuff).

But, my immediate guess is that:

• When the parent is a class component, it avoids re-rendering the child, and the child's mapState is thus not called
• When the parent is a function component, it does re-render the child, and thus the child's mapState is called

which sounds like a combination of how React itself works in general for rendering rather than a particular bug in React-Redux.

I'll try to look into this at some point, but not sure when.

[pandaiolo]

Sure, thank you!