React-hot-loader: Components "render()" not triggered after HMR

[b12k]

Description

Components (both class based and functional) render function is not triggered after HMR.
So no updates applied to UI.
If I force component to re-render - changes become visible.
Components are decorated with hot(module)(Component) and connect() from Redux.
Browser console log lines as expected.

import React from 'react';
import { hot } from 'react-hot-loader';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import './styles/HomeSearchForm.scss';
import { BaseIcon } from '../base';
import { SelectSingle } from '../controls';
import { getMapedSearchForms } from '../../store/selectors';
import { I18n } from '../i18n';
import { setSearchItemValue } from '../../store/actions';

const HomeSearchForm = (props) => {
  const fields = props.form.groups[0].items;
  return (
    <section className={`home-search-form card shadow-sm ${props.className}`}>
      <div className="card-header bg-transparent border-bottom-0 py-4">
        <div className="row">
          <div className="col-12 col-sm-auto mb-5 mb-sm-0 text-right order-sm-1">
            <div className="dropdown">
              <button
                className="btn btn-link dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-toggle="dropdown"
              >
                Vehicle Type Select 123
              </button>
              <div className="dropdown-menu dropdown-menu-right">
                <span className="dropdown-item">Action</span>
                <span className="dropdown-item">Another action</span>
                <span className="dropdown-item">Something else here</span>
              </div>
            </div>
          </div>
          <div className="col-12 col-sm order-sm-0 text-center text-sm-left">
            <h3>
              Search Form Home
              <span className="text-warning">
                {"123'123"}
              </span>
              Title
            </h3>
            <p className="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aut?</p>
          </div>
        </div>
      </div>
      <div className="card-body">
        <div className="row no-gutters">
          { fields.map(f => (
            <SelectSingle
              {...f}
              className="col-12 col-sm-3"
              key={f.name}
              onChange={({ target: { name, value } }) => props.setItemValue({ name, value })}
              size="lg"
              hasLabelOption
            />
          )) }
        </div>
      </div>
      <div className="card-footer bg-transparent border-top-0 py-4">
        <div className="row justify-content-end">
          <div className="col-12 col-sm-6 col-md-4 mb-3 mb-sm-0 col-xl-3">
            <button className="btn btn-link btn-block">
              <I18n path="global.advancedSearch" /> <BaseIcon name="chevron" />
            </button>
          </div>
          <div className="col-12 col-sm-6 col-md-4 col-xl-3">
            <button className="btn btn-warning btn-block">
              Lorem ipsum dolor sit amet.
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

HomeSearchForm.propTypes = {
  className: PropTypes.string,
  form: PropTypes.shape({
    groups: PropTypes.arrayOf(PropTypes.shape({
      items: PropTypes.arrayOf(PropTypes.shape({})),
    })),
  }).isRequired,
  setItemValue: PropTypes.func.isRequired,
};
HomeSearchForm.defaultProps = {
  className: '',
};

const mapStateToProps = ({ search }) => ({
  form: getMapedSearchForms(search).home,
});
const mapDispatchToProps = dispatch => ({
  setItemValue: payload => dispatch(setSearchItemValue(payload)),
});

export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(HomeSearchForm));

Console output:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/client/components/pageHome/HomeSearchForm.jsx
[HMR] App is up to date.

Expected behavior

Component must be re-rendered.

Actual behavior

Component doesnt re-render.

Environment

React Hot Loader version: 4.1.2

1. node -v: 9.11.1

2. npm -v: 5.6.0

3. Operating system: Windows 10 x64

4. Browser and version: Chrome 66, FF 59

Thanx in advance!

[b12k]

Just find out that the problem is in order of component "decorators".
connect(mapStateToProps, mapDispatchToProps)(hot(module)(HomeSearchForm))
Seems to work.
Also this component is used it other component which is also "hot".
And I find out that "connected" components in order to be re-rendered after changes MUST be decorated with "hot".

[theKashey]

Your initial code I the "right" code, but connect swallows update, as long "data not changed"
Wrapping "internal" component with hot makes possible to "bypass" redux-connect checks, and thus everything working.

This sounds like #944, the issue I still could not trace down.

[akhayoon]

Do I need to import hot with every top level component? Can't I just do it with my top level (i.e the child of Provider)

[theKashey]

@akhayoon - yeah. This is how RHL __should work__. This is how it works for me, or for tests.
But not always, and I dont know why, but know "when" it was possibly broken (16.3 migration).

[hhaidar]

@akhayoon @b12k upgrading to 4.5.2 worked for us.

[theKashey]

4.5.2 contains a serious "WFT-level" bug. Please use at least 4.5.3