Connected component doesn't rerender with React 15.2.1

[hoschi]

I have two projects with nearly the same stack, last week I updated one of them from React 15.0.1 to 15.2.1. After the update this code:

let MyComponent = ({count}) => {
     return <div>{ count }</div>;
}

export default ReactRedux.connect(mapStateToProps)(MyComponent);

doesn't work anymore. The component MyComponent doesn't receive changed data from store. It looks like subscribe wouldn't work, because mapStateToProps gets not called. I had to create dummy components around them:

let MyComponent = ({count}) => {
     return <div>{ count }</div>;
}

export default ReactRedux.connect(mapStateToProps)((props) => <MyComponent {...props} />);

to get it again to work.

After some digging I saw that with React 15.0.1 the connected component shows up as 'Connect(MyComponent)' and with React 15.2.1 it has the same name 'MyComponent' in React dev tools. As hierarchy: 15.0.1: Connect(MyComponent) > MyComponent 15.2.1: MyComponent > MyComponent

react-redux: 4.4.5 redux: 3.5.2

[madeinfree]

Hi, @hoschi, Do you have any sample code for me to reproduce it ? maybe your simple reducer and action, I try to updated my project and looks well for my project ~

If your state didn't change anything then not re-render anything for you, but I think that is not your problem.

version React: 15.2.1, ReactDOM: 15.2.1 redux: 3.5.2, react-redux: 4.4.5

[hoschi]

I tried to create simple fiddle as sample but I can't reproduce the bug in this simple setting. An example is there for hard to create.

I debbuged around and have some findings:

• babel-transform-react-inline-elements plugin fixes the issue, in prod env it work
• it makes no difference if MyComponent is created as functional stateless component or via React.createClass (the latter is the case in my code)
• indeed trySubscribe of the connected component is not called
• this is because componentDidMount hook gets not called problem for me is now, why React doesn't call the hook.

btw, do you have some tips for debuging react code? I googled around, but found only stuff for React Native. My problem when debugging is for this problem, that I can't distinguish between two components. Component.displayName is not there and I can't see anything other which lets me see which component factory/instance I see at the moment.

[hoschi]

I use react-hot-loader 3.beta gaearon/react-hot-boilerplate#61 and beta.0 causes this problem, but beta.1 fixes it