Description
I think this is an issue with how react-redux handles the hot reloading of connected components. If you have a non-connected (dumb) component render a connected component as a wrapper component, any content within that wrapper will no longer be re-rendered on change.
_Connected component:_
class Form extends Component {
constructor(props) {
super(props);
}
render() {
return (
<form>
{this.props.children}
</form>
);
}
}
export default connect(...)(Form);
_Dumb component rendering connected component:_
class LoginForm extends Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<Form id="loginForm">
this is a test
</Form>
);
}
}
Changing the text this is a test will not cause the component to re-render. Replace <Form> with <div> and everything works as expected. Replace connect()(Form) with just Form and everything works as expected.
Repository demonstrating issue is available at https://github.com/bunkat/counter. It is the react-redux counter example with babel6 hot loading and a new connected wrapper component.
To reproduce the issue:
- git clone https://github.com/bunkat/counter.git
- cd counter
- npm install
- npm start
- Open browser to http://localhost:3000
- Edit components/Counter.js
- Modify the render method, change Clicked to Not Clicked
The module will be updated via HMR, but the Counter component will not be rendered with the new text.