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

Open
#2,024 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
react
Domain
frontend

Research direction

Start with the linked CodeSandbox reproduction and compare the console output when toggling conditional rendering under functional and class parents. Determine whether the differing mapStateToProps calls are expected, then define the expected behavior before considering any change.

Written by the indexing model from the issue text.

Description

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
Dominant language
TypeScript
Stars
23.4k
Forks
3.3k
Avg merge
10d 10h
Merged PRs (30d)
12

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reduxjs/react-redux

All issues in reduxjs/react-redux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.